HTML google mapマーカーとしてカスタムdivを追加

hereのようにマップとカスタムマーカーを実装する必要があります。ここではマップ実装html http://jsfiddle.net/4a87k/ですが、カスタムcssをマーカーとして追加する方法はありません。HTML google mapマーカーとしてカスタムdivを追加

<head> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 

     function initMap() { 
     var myLatLng = {lat: -25.363, lng: 131.044}; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: myLatLng 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"> 
    </script> 
    </body>

出典

2017-03-07 CodeDezk

マーカーをカスタマイズするためのドキュメントは、非常に良いです、find it hereです。

、簡単な例では、マーカーに直接PNGファイルにリンクすることですが、あなたはAPIでCustom Markersでこれをより行うことができます。

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -33, lng: 151} 
    }); 
     var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
     var beachMarker = new google.maps.Marker({ 
     position: {lat: -33.890, lng: 151.274}, 
     map: map, 
     icon: image 
     }); 
    }

出典

2017-03-07 07:01:49

私は実際に私がマーカーとしてアニメーションを必要とする、例を見つけましたpngの代わりに。 – CodeDezk

@CodeDezkマーカーの説明をアニメーション化する方法はこちらです：https://developers.google.com/maps/documentation/javascript/markers#animate –

具体的には、次の行：「animation：google.maps.Animation.DROP」 –

HTML google mapマーカーとしてカスタムdivを追加

答えて

関連する問題