Blog

HOME > Web > HTML > 【Javascript】Google Mapsでオリジナルのマーカーを表示

【Javascript】Google Mapsでオリジナルのマーカーを表示

2017/05/12

HTML Googleマップ javascript

備忘録です

Google Mapでオリジナルのマーカーを表示する方法です。

参考サイト
(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

head部分に以下のスクリプトを記述

<script src="https://maps.google.com/maps/api/js?key=****"></script>

keyの箇所にはAPIコードを入れてください。
取得方法はこちらを参考にしてください。

bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。
スクリプトで取得するidを「access_map」にしています。ここは任意で設定して構いません。

<body onload="initialize();">

<div id="access_map"></div>

</body>

CSSで縦横サイズを指定

#access_map{
     width: 100%;
     height:300px;
}

位置情報などの情報をhead内に記述

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(35.710403, 139.811076);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);
}
</script>

LatLng(35.710403, 139.811076)は経度、緯度です。Google Mapsで取得してください。
なお、マーカーの位置をずらしたい場合には、上の経度、緯度の小数点以下を少しずつ変えると位置調整ができます。
getElementById('access_map')で地図表示のためのid「access_map」を指定。

オリジナルマーカーを表示するためのスクリプト
マーカーを画像にするコードは以下

 var icon = new google.maps.MarkerImage('marker.png',
  new google.maps.Size(156,198),/*アイコンサイズ設定*/
  new google.maps.Point(0,0),  // origin
  new google.maps.Point(60,100) // anchor
  );
var markerOptions = {
  position: latlng,
  map: map,
  icon: icon,
  title: '場所名など'
};

「marker.png」がマーカーの画像名です。
画像が任意のディレクトリにある場合は、「/images/marker.png」のように記述します。

まとめると

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
}
</script>

レスポンシブの場合、上記だけだとマーカーが中心からずれてしまいます。

そこで、マーカーを中心に表示するコードを追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

さらに吹き出しを追加する場合は、以下を追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });


    //吹き出しをオープン
    infowindow.open(map,marker);


    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

吹き出しのCSSを設定します。

h3.map_title{
  text-align: center;
  font-size: 16px;
}
p.map_comment{
  padding:0 30px;
}

次はGoogle Mapsを白黒で表示



ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ