

現在、google map apiを使用して、mapの表示、markerの表示はできています。

実現したい機能として、マーカーの代わりに文字列(情報ウインドウのイメージ)を表示させたいと思っています。

・実装しているマーカ  
[![普通のマーカ](https://i.stack.imgur.com/7kUuQ.png)](https://i.stack.imgur.com/7kUuQ.png)

・実装したいマーカのイメージ  
[![実装したいマーカ](https://i.stack.imgur.com/9NHVj.png)](https://i.stack.imgur.com/9NHVj.png)

動的に表示する値を変化させて、表示したいと考えております。  
また、現在の実装だとchromeの開発者ツールで確認すると実装しているマーカではHTML要素として認識されていませんが、実装したいマーカ(Airbnbを参考にさせていただきました)では要素として認識されています。

どなたか上記の知見がある方、いらっしゃいましたらご教授いただけますようお願いします。

以下は現在の実装のjsです。

[code]

    $(function(){
      var hidden_keyword = gon.keyword;
      if (hidden_keyword.length) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "address": hidden_keyword }, function(results, status){
          if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat().toFixed(6);
            var lng = results[0].geometry.location.lng().toFixed(6);
            var mapOpt = {
              center: new google.maps.LatLng(lat, lng),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),mapOpt);
            $(gon.latlng).each(function(i){
              var latlng = new google.maps.LatLng( gon.latlng[i].lat, gon.latlng[i].lng, false );
              var marker_i = new google.maps.Marker({
              map: map,
              position: latlng
              });
            });
          }else {
            alert("地名が入力されなかった為、検索できませんでした。");
          }
        });
      }
    });
    
[/code]


CC BY-SA 3.0
2017-04-18T03:10:48.753
34087
2017-06-04T02:04:45.057
2017-04-29T07:56:00.307
22531
22615
question
javascript google-maps
google mapにhtml要素を埋め込みたい。


カスタムオーバーレイでできます。 `google.maps.OverlayView` を使っていきます。  
<https://developers.google.com/maps/documentation/javascript/customoverlays>


CC BY-SA 3.0
2017-04-29T23:48:18.813
34386
2017-04-29T23:48:18.813
2341
34087
answer