Google Maps(グーグルマップ)上にマーカーを設定する方法

Google Maps APIを使ってマップを生成した場合、マップ上にマーカーを設定することができます。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps(グーグルマップ)上にマーカーを設定する方法

まず、以下のマップに3つのマーカーを設定させました。

サンプル

青アイコン位置(アイコンをドラッグしてください)
緯度
経度

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Simple Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:80%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script>
      var map;
      var marker1;
      var marker2;
      var marker3;
      var bVisible;
      var optMarker2;

      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);

         var mapOptions = {
           zoom: 16,
           center: myLatlng
         }

         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         // https://developers.google.com/maps/documentation/javascript/markers
         marker1= new google.maps.Marker({
             position: myLatlng,
             title:"1!"
         });

         marker1.setMap(map);
         
         optMarker2 = {
             position: { lat:35.683774,lng: 139.745473 },
             animation: google.maps.Animation.BOUNCE,
             map:map,
             title:"2"
         };

         marker2 = new google.maps.Marker();
         marker2.setOptions(optMarker2);
         bVisible = true;


         marker3 = new google.maps.Marker({
            position: { lat:35.681289,lng: 139.767244 },
            icon: {
                url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
             },
             draggable: true,
             map:map,
             title:"3"
         });

         // マーカーのドロップ(ドラッグ終了)時のイベント
         google.maps.event.addListener( marker3, 'drag', function(evt){
            // https://developers.google.com/maps/documentation/javascript/reference/map#MapMouseEvent
            // 「evt」はMapMouseEvent 
            // MapMouseEventのプロパティ.latLngが緯度経度。
            document.getElementById('lblIdo'). textContent = evt.latLng.lat();
            document.getElementById('lblKeido').textContent = evt.latLng.lng();
         });


         // マーカーのドロップ(ドラッグ終了)時のイベント
         google.maps.event.addListener( marker3, 'dragend', function(evt){
            // https://developers.google.com/maps/documentation/javascript/reference/map#MapMouseEvent
            // 「evt」はMapMouseEvent 
            // MapMouseEventのプロパティ.latLngが緯度経度。
            document.getElementById('lblIdo'). textContent = evt.latLng.lat();
            document.getElementById('lblKeido').textContent = evt.latLng.lng();
         });


      }
      function ShowHideMarker2() {
         if ( bVisible ) {
            marker2.setMap(null);
            bVisible = false;
         } else {

            bVisible = true;
            marker2.setMap(map);
            marker2.setOptions(optMarker2);
         }

      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <p>
      <input type="button" value="アニメアイコンを非表示/表示"  onclick="ShowHideMarker2();" />
   </p>
   <p>
      <table>
         <tr>
            <th colspan="2">青アイコン位置(アイコンをドラッグしてください)</th>
         </tr>
         <tr>
            <th style="text-align:left">緯度</th><td style="text-align:right"><span id="lblIdo"></span></td>
         </tr>
         <tr>
            <th style="text-align:left">経度</th><td style="text-align:right"><span id="lblKeido"></span></td>
         </tr>

      </table>
   </p>
</body>
</html>

デモ

google.maps.Marker

地図上にマーカーを設定するには「google.maps.Marker」オブジェクトを生成します。

オブジェクトを生成する

         marker1= new google.maps.Marker({
             position: myLatlng,
             title:"1!"
         });

         marker1.setMap(map);

google.maps.Markerをnewして、オプションの「position」に緯度/経度(google.maps.LatLng)を設定し、setMapメソッドを使用し、google.maps.Mapクラスと紐づけば、地図上に、マーカーが表示されます。

アニメーション有マーカー

動きを付けた(アニメーションのある)マーカーも設定できます。

ただ、アニメーションの種類は、跳ねる(BOUNCE)動きと、マーカーが落ちてくる(DROP)の動きの二つです。サンプルでは、BOUNCEを指定してあります。

         optMarker2 = {
             position: { lat:35.683774,lng: 139.745473 },
             animation: google.maps.Animation.BOUNCE,
             map:map,
             title:"2"
         };

         marker2 = new google.maps.Marker();
         marker2.setOptions(optMarker2);
         bVisible = true;
定数動き
google.maps.Animation.BOUNCEマーカーが跳ねる
google.maps.Animation.DROP最初にマーカーが落ちてくる

マーカの非表示→再表示

      function ShowHideMarker2() {
         if ( bVisible ) {
            marker2.setMap(null);
            bVisible = false;
         } else {
            bVisible = true;
            marker2.setMap(map);
            marker2.setOptions(optMarker2);
         }
      }
<input type="button" value="アニメアイコンを非表示/表示"  onclick="ShowHideMarker2();" />

サンプルの「アニメアイコンを表示/表示」ボタンを押してみてください。

既にマーカーが表示されいてる場合には「setMap(null)」が実行され、アイコンとマップとの紐づけが取れて、マップ上から消えてしまいます。

非表示の状態である場合には、「setMap(map)」が実行されて、再び、マップ上にマーカーが表示されます。

独自アイコンを指定したマーカーの設定

MarkerOptionsのiconにgoogle.maps.Iconの形式で画像のurlを指定すると、独自のアイコンを指定することができます。

東京駅にあるアイコンは青い色のアイコンが『https://maps.google.com/mapfiles/ms/icons/blue-dot.png』通り設定されています。

マーカーのドラッグによる移動

MarkerOptionsのdraggableを「true」に設定すると、マーカーをドラッグで移動させることができます。

         marker3 = new google.maps.Marker({
            position: { lat:35.681289,lng: 139.767244 },
            icon: {
                url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
             },
             draggable: true,
             map:map,
             title:"3"
         });

なおかず、ドラッグ中およびドラッグ終了後などのイベントも取得できます。

サンプルではドラッグ中とドラッグ終了後、マーカーの位置を取得し、緯度/経度をラベルに設定しています。

         // マーカーのドロップ(ドラッグ終了)時のイベント
         google.maps.event.addListener( marker3, 'drag', function(evt){
            // 「evt」はMapMouseEvent 
            // MapMouseEventのプロパティ.latLngが緯度経度。
            document.getElementById('lblIdo'). textContent = evt.latLng.lat();
            document.getElementById('lblKeido').textContent = evt.latLng.lng();
         });


         // マーカーのドロップ(ドラッグ終了)時のイベント
         google.maps.event.addListener( marker3, 'dragend', function(evt){
            // 「evt」はMapMouseEvent 
            // MapMouseEventのプロパティ.latLngが緯度経度。
            document.getElementById('lblIdo'). textContent = evt.latLng.lat();
            document.getElementById('lblKeido').textContent = evt.latLng.lng();
         });

Google.maps.event.addListenerを使って、青色のマーカーの「drag」イベントと「dragend」イベントを取得します。

イベントが発生すると、引数で、MapMouseEventオブジェクトを取得でき、そこから位置情報が取得できます。

MapMouseEventのプロパティ「latLng」から緯度(lat)と経度(lng)を取得できます。
デモでは、それをラベルに表示させるようにさせてあります。

ご参考にしていただければと思います。

ご参考

関連ページ