Creating
Google maps in web page using Google API is as simple as drinking a cup of coffee.
Markers are the pinpoints that point the symbolic representation of the given
address. Info window is a type of popup that displays some data like address or
location when the Marker are clicked. In the below code you can view the
implementation of google maps for given locations.
JavaScript and HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style type="text/css">
html,
body,
#pane{
height: 500px;
width: 500px;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
function geocodeAddress(locations, i) {
var address = locations[i][0];
geocoder.geocode({
'address': locations[i][0]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position:
results[0].geometry.location,
title: title,
animation:
google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map,
address);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " +
address + " failed:" + status);
}
});
}
var locations = [
['New
York, NY'],
['Newark,
NJ'],
['Philadelphia,
PA']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("pane"), {
center: new google.maps.LatLng(37.4419,
-122.1419),
zoom: 13,
mapTypeId:
google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var address = locations[i][0];
geocoder.geocode({
'address': locations[i][0]
},
function (results, status) {
if (status ==
google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position:
results[0].geometry.location,
animation:
google.maps.Animation.DROP,
address: address,
})
infoWindow(marker, map,
address);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " +
address + " failed:" + status);
}
});
}
function infoWindow(marker, map, address) {
google.maps.event.addListener(marker, 'click', function () {
var html = "<div>" + address + "<br></div></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
map: map,
position:
results[0].geometry.location,
animation:
google.maps.Animation.DROP,
address: address,
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, address);
return marker;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="pane" style="border: 2px solid #3872ac;"></div>
</form>
</body>
</html>
This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
ReplyDeleteWordPress development company in Chennai