Introduction
The chapter demonstrates about the Google maps info window and following are the concepts covered.
- Info Windows.
Description
Google maps provide info windows to display the content on a map in a popup window, the content like images or some text can be displayed using info windows which contain a tapered stem and content area. The Google maps info windows are mainly attached to a marker or preferred Lat/Lng locations.
The Google maps info window constructor make use of the object
InfoWindowOptions for displaying the information with following properties.
- content
- position
- maxWidth
Example
The example below demonstrate the Google maps info windows Which display information on clicking the marker located on the map.
[c]
<!DOCTYPE html>
<html>
<head>
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true"></script>
</body>
<script>
var myCenter = new google.maps.LatLng(17.3616, 78.4747);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"metropolitan city"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:1500px; height:1000px;"></div>
</body>
</html>
</html>
[/c]
Key Points
- Google Map Events plays a main role between JavaScript API and users.
- The Google Maps info window event should be given using google.maps.InfoWindow.
- The event get fired by the JavaScript only when the object property changed by the user.
Programming
Tips
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.
- Don't give the API key in code exposed to public.