1

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

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

・実装しているマーカ
普通のマーカ

・実装したいマーカのイメージ
実装したいマーカ

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

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

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

$(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("地名が入力されなかった為、検索できませんでした。");
      }
    });
  }
});
1
  • # お礼 @bouzuyaさん アドバイスありがとうございます。 閲覧していただいた方もありがとうございます。 # 現状 質問してから、自分の方でも色々と試しておりまして現状ですとinfoWindowが要素として認識されておりましたのでそれで実装しております。 オーバーレイを使用すると私のやりたかった要素を埋め込むことができそうですので、そちらでも試してみようと思います。 個別にclass,idも付与できますので自分の考えていた実装ができそうです。
    – shoehead
    2017年4月30日 11:58

1 件の回答 1

1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。