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>
2 Comments
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
Machine Learning Projects for Final Year machine learning projects for final year
ReplyDeleteDeep Learning Projects assist final year students with improving your applied Deep Learning skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include Deep Learning projects for final year into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Deep Learning Projects for Final Year even arrange a more significant compensation.
Python Training in Chennai Python Training in Chennai Angular Training Project Centers in Chennai