Google Maps Moving Marker On Click
What I want to do is, on my map, when I click somewhere on the map, it shows a marker on the point, then I click different point on the map then it shows a another marker. But I w
Solution 1:
Every time placemarker() is ran, it creates a new marker.
You need to create the marker once outside of the placemarker function and after that, inside placemarker, use marker.setPosition().
Solution 2:
Another solution is to move a marker, for that you just user marker.setPosition(). (thanks kjy112 for the warning :)
<html><styletype="text/css">#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">var marker;
functioninitialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
functionplaceMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
}
}
</script></head><bodyonload="initialize()"><divid="map_canvas"style="1500px; 1000px"></div></body></html>Solution 3:
To remove a marker just setMap(null) it.
<html><styletype="text/css">#map_canvas {
height: 760px;
width: 1100px;
position: static;
top: 100px;
left: 200px;
}
</style><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">var oldMarker;
functioninitialize() {
var latlng = new google.maps.LatLng(42.55308, 9.140625);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
functionplaceMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
animation: google.maps.Animation.DROP,
});
if (oldMarker != undefined){
oldMarker.setMap(null);
}
oldMarker = marker;
map.setCenter(location);
}
}
</script></head><bodyonload="initialize()"><divid="map_canvas"style="1500px; 1000px"></div></body></html>
Post a Comment for "Google Maps Moving Marker On Click"