Google Maps API - SPLessons

Google Maps Info Window

Home > Lesson > Chapter 12
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Google Maps Info Window

Google Maps Info Window

shape Introduction

The chapter demonstrates about the Google maps info window and following are the concepts covered.
  • Info Windows.

Info Windows

shape 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.

shape 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]

Summary

shape 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.

shape 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.