Festlegen des Symboltyps per Schaltfläche Klicken mit Google Maps API3

Ich versuche, eine einfache interaktive Karte zu erstellen, die es dem Benutzer ermöglicht, einen Markentyp über eine Schaltfläche außerhalb der Karte auszuwählen und dann einen einzelnen Marker zu platzieren, wenn der Benutzer darauf klickt die Karte. Nachdem der Marker gelöscht wurde, kann der Benutzer die Karte neu positionieren oder einen anderen hinzuzufügenden Markertyp auswählen. Ich weiß, das ist eine ziemlich grundlegende Frage, aber ich habe gerade angefangen zu lernen. Ein Beispiel würde sehr geschätzt werden, da ich immer noch die Terminologie lerne. Vielen Dank!Festlegen des Symboltyps per Schaltfläche Klicken mit Google Maps API3

Hier ist was ich bisher habe.

<!DOCTYPE html> 
<html style="height: 100%"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple SITTEMP</title> 
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=drawing" async defer> 
</script> 
</head> 
<body onload="initialize()" style="height:100%"> 
<script type="text/javascript"> 
    var map; 
     function initialize() { 
      var myLatlng = new google.maps.LatLng(45.401942, -110.663985); 
      var myOptions = { 
      zoom: 5, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
} 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(event.latLng); 
}); 
}; 
     function placeMarker(location) { 
      var marker = new google.maps.Marker({ 
      position: location, 
      map: map, 
      draggable: true, 
}); 
} 
</script> 

    <div id="map_canvas" style="width:50%; height:50%;"></div> 
    <button id= "blueButton"> Add Blue Marker</button> 
    <button id= "redButton"> Add Red Marker</button> 
</body> 
</html>

Quelle

2017-05-05 NewGuy

Hier einfach:

<!DOCTYPE html> 
<html style="height: 100%"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple SITTEMP</title> 
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTQxCH5Vw9ot8amZ-3dG66_joi2mzpJqI&callback=initMap&libraries=drawing" async defer> 
</script> 
</head> 
<body onload="initialize()" style="height:100%"> 
<script type="text/javascript"> 

var map; 
function initialize() { 
    var myLatlng = new google.maps.LatLng(45.401942, -110.663985); 
    var myOptions = { 
     zoom: 5, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    google.maps.event.addListener(map, 'click', function(event) { 
     placeMarker(event.latLng); 
    }); 
} 

var markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png'; 
function setMarkerIconColor(color){ 
    if (color == "blue") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'}; 
    if (color == "red") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'}; 
} 
function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     icon: markerIcon, 
     map: map, 
     draggable: true, 
    }); 
} 

</script> 

    <div id="map_canvas" style="width:50%; height:50%;"></div> 
    <button id= "blueButton" onclick="setMarkerIconColor('blue')"> Add blue Marker </button> 
    <button id= "redButton" onclick="setMarkerIconColor('red')"> Add Red Marker</button> 
</body> 
</html>

Quelle

2017-05-05 10:51:18 ReFran

Festlegen des Symboltyps per Schaltfläche Klicken mit Google Maps API3

Antwort

Verwandte Themen