"Add marker to a desired location and resume back to location on Button Click in a Google Map "
In my previous article I explained how to integrate Google Map in a .Net Wb Application, If incase someone has missed it then please go to the following link :
Google Map Integration
In this article I will explain how to add a marker on a desired location with the help of Lat
Long, and resume back to that location on click of a Button.
First create a Web Application and integrate Google Map, The sample code is as follows:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/jsv=3.exp">
</script>
<script type="text/javascript">
var map;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng('23.11', '71.00'),
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcanvas"),mapOptions);
}
</script>
<body onload="initialize();">
<div id="mapcanvas" style="width:700px; height:500px;"></div>
</body>
Now write the following two methods for creating marker and resuming back to the marker location respectively inside the script tag:
function AddMarker()
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
function BackToLocation(newLat, newLng) {
map.setCenter({
lat: newLat,
lng: newLng
});
}
Note:-> In the AddMarker() method you can pass your own Lat Lng.
Now create two Buttons in the HTML to call these methods:
<body onload="initialize();">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<input type="button" id="addMarker" value="Add Marker" onclick="AddMarker();"/>
<input type="button" id="back" value="Back to location" onclick="BackToLocation(23.72, 72.100);"/>
</body>
In the above code the Button with id addMarker will call the method AddMarker() onclick and will place the marker on the supplied Lat Lng and the Button with id back will call the
method BackToLocation() onclick and will resume the map back to the location as per the supplied Lat Lng.
Hope it helps...!
0 Comment(s)