Now, we are ready to create a basic Google Map.
The example below creates a Google Map centered on London, England:
The rest of this page explains the example above line by line.
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.
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.
If your application is an HTTP Secure application, load the Google Maps API over HTTPS instead:
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:
To initialize a Map, we first create a Map properties object to define some properties for the map:
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.
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.
The mapTypeId property specifies the initial map type to display.
The following map types are supported:
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.
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):
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:
Your message has been sent to W3Schools.