Description:
In this
example we explain that how to display Google Maps with multiple Markers with
InfoWindows.or how to display Google Maps in our website or blog based on the
our address using Google API.or display multiple markers with InfoBox using
Google Map API.or display multiple marker on the google map with tooltip or
infobox that display the information of the address using Google Map.
Here
we demonstrate how to display InfoWindow when click on the marker in Google
Map.
<html>
<head>
<style
type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script
type="text/javascript"
src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-
FxYoVTVq6Is6lD98&sensor=false">
</script>
<script
type="text/javascript">
var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];
function GetMap() {
var myOptions = {
center: new google.maps.LatLng(33.890542, 151.274856),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("default"),
myOptions);
DisplayMarkers(map,locations)
}
function DisplayMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length;
i++)
{
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add =
locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position:
latlngset
});
map.setCenter(marker.getPosition())
var content = "Loan Number: "
+ loan + '</h3>' + "Address:
" + add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click',
(function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onload="GetMap()">
<div id="default" style="width:100%;
height:100%"></div>
</body>
</html>
0 comments:
Post a Comment