HTML google map benutzerdefinierte div als marker

Ich muss Karte und benutzerdefinierte marker wie gezeigt here implementieren, hier ist die Map-Implementierung html http://jsfiddle.net/4a87k/ Aber keine Ahnung, wie benutzerdefinierte css als Marker hinzufügen.HTML google map benutzerdefinierte div als marker

<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>

Quelle

2017-03-07 CodeDezk

Die Dokumentation zum Anpassen von Markern ist sehr gut, find it here.

Und ein einfaches Beispiel ist eine PNG-Datei direkt auf den Marker zu verknüpfen, aber Sie können mit Custom Markers im api mit diesem mehr:

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 
     }); 
    }

Quelle

2017-03-07 07:01:49

Ich fand das Beispiel, ich brauche eigentlich Animation als Marker anstelle von png. – CodeDezk

@CodeDezk animieren einen Marker Anweisungen sind hier: https://developers.google.com/maps/documentation/javascript/markers#animate –

Speziell diese Zeile: "Animation: google.maps.Animation.DROP" –

HTML google map benutzerdefinierte div als marker

Antwort

Verwandte Themen