ボタンでアイコンの種類を設定するGoogle Maps API3でクリックする

私はマップ外のボタンからマーカータイプを選択できるようにする簡単なインタラクティブマップを作成しようとしています。地図。マーカーがドロップされた後、ユーザーはマップの位置を変更するか、追加する別のマーカータイプを選択できます。これはかなり基本的な質問ですが、私はちょうど学び始めました。私はまだ用語を学んでいるので、例は非常に高く評価されるだろう。ありがとう！ボタンでアイコンの種類を設定するGoogle Maps API3でクリックする

これまで私がこれまで持っていたことは次のとおりです。ここでは、簡単なワン

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

出典

2017-05-05 NewGuy

：

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

出典

2017-05-05 10:51:18 ReFran

ボタンでアイコンの種類を設定するGoogle Maps API3でクリックする

答えて

関連する問題