Google Maps Javascript API is very easy to use. In this article, we display a map with location markers.

Get an API Key for Google Maps. Use the API Key in the script tag.

Create a map object with few options. Map options include an initial zoom and center location. Specify location using LatLng object having latitude and longitude. Mark few locations on the map. For each location, create a marker using LatLng object. Finally, attach the marker object to the map.

LatLngBounds is another useful class. It helps to center the markers within the map. Add all locations to the bounds object. Finally, use the getCenter method to set the map center. The bounds object cover all the markers in the map.

Render the map within a div tag.

Troubleshooting problems in Google Maps integration

The enclosing div should have a width and a height

Don’t forget to set the width and height of the enclosing div tag. If not set, Google maps does not render. Use the browser developer tools to view the computed size of the enclosing div tag.

Incompatibility with jQuery selector

jQuery selector cannot be directly used to instantiate a map. jQuery selector returns a list of nodes. Retrieve the node as follows.

Rendering a map within a hidden element

The map does not render when is it is within a hidden element. Tabs are a common source of this problem. Create the map when tab is shown.

Introduction to Google Maps Javascript API