Hi mvadukul,
Refer below code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSave]").bind("click", function () {
GetLocation($("#txtAddress").val());
return false;
});
});
function GetLocation(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = {};
location.lattitude = results[0].geometry.location.lat();
location.longitude = results[0].geometry.location.lng();
var mapOptions = {
center: new google.maps.LatLng(location.lattitude, location.longitude),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var myLatLng = new google.maps.LatLng(location.lattitude, location.longitude);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(marker, "click", function (e) {
var location = e.latLng;
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'> Latitude:" + location.lat() + "<br/> Longitude:" + location.lng() + "</div>");
infoWindow.open(map, marker);
});
}
});
};
</script>
<input type="text" id="txtAddress" value="The Schools HR Co-operative Ltd, Uxbridge" />
<input type="button" id="btnSave" value="Save" />
<hr />
<div id="dvMap" style="height: 600px; width: 300px">
</div>
