Set Icon Type by Button Click with Google Maps API3
Question
I'm trying to make a simple interactive map that will allow the user to select a marker type from a button outside the map, then place a single marker when the user clicks on the map. After the marker is dropped the user could reposition the map or select another marker type to add. I realize this is a pretty basic question but I just started learning. An example would be much appreciated as I am still learning the terminology. Thanks!
Here is what I have so far.
<!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>
1 answers
solution1
0 ACCPTED 2017-05-05 10:51:18
Here a simple One:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.