Google Maps API

Google Maps Ref

Google Maps Basic

Create a Basic Google Map

Now, we are ready to create a basic Google Map.

The example below creates a Google Map centered on London, England:

Example Explained - Step By Step

The rest of this page explains the example above line by line.

Why Declare The Application as HTML5?

Most browsers will render pages with the HTML5 doctype in "standards mode" which means that your application is more cross-browser compliant.

Additionally, browsers that don't understand it will ignore it, and use "quirks mode" to display their content.

Tip: Be aware that some CSS that works within quirks mode is not valid in standards mode. In specific; all percentage-based sizes must inherit from parent block elements. If any of those ancestors fail to specify a size, they are set to 0 x 0 pixels. If you want to use percent, include the following <style> declaration:

This style declaration indicates that the map container (googleMap) should take up 100% of the height of the HTML body.

Add Google Maps API Key

The first <script> tag in the example above is required, and it includes the Google Maps API:

Insert your generated API key in the required key parameter (key=YOUR_API_KEY).

The sensor parameter is required and it indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location. Set this value to either true or false.

HTTPS

If your application is an HTTP Secure application, load the Google Maps API over HTTPS instead:

Asynchronously Loading

It is also possible to load the Google Maps API after the page has finished loading, or on demand.

The example below uses window.onload to load the Google Maps API after the page has fully loaded. The loadScript() function creates the Google Maps API <script> tag. In addition, the callback=initialize parameter is added to the end of the URL to only execute the initialize() function after the API is fully loaded:

Define Properties For The Map

To initialize a Map, we first create a Map properties object to define some properties for the map:

Center

The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.

Zoom

The zoom property specifies the initial zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

MapTypeId

The mapTypeId property specifies the initial map type to display.

The following map types are supported:

• ROADMAP (normal, default 2D map)
• SATELLITE (photographic map)
• HYBRID (photographic map + roads and city names)
• TERRAIN (map with mountains, rivers, etc.)

Where to Show the Google Map

A named <div> element is often used to hold/show the Google Map:

Note: The map will always take its size from its containing element. So, always set a size on that <div> element.

Create a Map Object

The code above creates a new map inside the <div> element (googleMap) using the parameters that are passed (mapProp).

Tip: To create several maps on one page, just add new map objects.

The example below defines four maps on one page (four maps with different map types):

Loading the Map

Execute the initialize() function that constructs the Map object on window load, to ensure that the map is placed on the page after the page is fully loaded: