In this article I will explain how to move a marker to different locations on Google Maps i.e. How to change (update) position of a marker on Google Maps without refreshing the map.
Move Google Maps Markers: Change (Update) Marker position on Google Maps without refreshing
The following code snippet consists of an array of markers of different geographic address locations. Each marker in the array contains title, latitude, longitude and description of the location.
Inside the window.onload event handler, the LoadMap
There is set of RadioButtons, where each RadioButron represents a location present in the JavaScript array. When a RadioButton is clicked the SetMarker
Using the value parameter, the details of the location is fetched and the marker position is updated on the Google Maps.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
{
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'
},
{
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
},
{
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
},
{
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}
];
window.onload = function () {
LoadMap();
};
var map;
var marker;
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
SetMarker(0);
};
function SetMarker(position) {
//Remove previous Marker.
if (marker != null) {
marker.setMap(null);
}
//Set Marker on Map.
var data = markers[position];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
};
</script>
<div>
<label for="rbMarker0">
<input type="radio" id="rbMarker0" name="rbMarker" value="0" οnclick="SetMarker(this.value)"
checked="checked" />Aksa Beach</label><br />
<label for="rbMarker1">
<input type="radio" id="rbMarker1" name="rbMarker" value="1" οnclick="SetMarker(this.value)" />Juhu
Beach</label><br />
<label for="rbMarker2">
<input type="radio" id="rbMarker2" name="rbMarker" value="2" οnclick="SetMarker(this.value)" />Girgaum
Beach</label><br />
<label for="rbMarker3">
<input type="radio" id="rbMarker3" name="rbMarker" value="3" οnclick="SetMarker(this.value)" />Jijamata
Udyan</label><br />
<label for="rbMarker4">
<input type="radio" id="rbMarker4" name="rbMarker" value="4" οnclick="SetMarker(this.value)" />Sanjay
Gandhi National Park</label>
</div>
<hr />
<div id="dvMap" style="width: 400px; height: 500px">
</div>
谷歌地图标记切换 Move Google Maps Markers: Change (Update) Marker position on Google Maps without refreshing
下载： Google_Maps_Marker_Position
