Introduction to Google Maps Javascript API

Google Maps Javascript API is very easy to use. In this article, I will show you how you can mark locations in a map.

The first step is to get an API Key for Google Maps. Use the API Key which can be used on a web page.

The code for showing the location on the map is very intuitive. Create a map object. For each location, you have create a LatLng object. The LatLng object is attached to the map via the Marker object. Here is how the code looks:

The LatLngBounds object helps to center the markers within the map. Add each LatLng object to the bounds object. The bounds object ensures that the map is zoomed enough to cover all the markers.

Also, a div tag needs to be added to the HTML:

The map object is bound to the div element at the time of creation. Google maps is rendered within the div element.

Troubleshooting problems in Google Maps integration

The enclosing div should have a width and a height

Sometimes, the enclosing div does not have a width or height. In this case, Google maps does not render. Use the browser developer tools to view the computed size of the enclosing div.

Incompatibility with jQuery selector

jQuery selector cannot be directly used to instantiate a map. jQuery selector returns a NodeList. The map creation code requires a node. The following code using jQuery selector works:

Rendering a map within a hidden element

The map does not render when is it is within a hidden element. jQuery UI tabs are a common source of this problem. When the hidden element is displayed, trigger the code to create the map.

Leave a Reply

Your email address will not be published. Required fields are marked *