Google Maps Basic

Google Maps Basics

Now let's create a simple Google Map.

The following displays a Google Map of London, UK:

Example

function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize);

Try it yourself »

Example Explained

We'll use the above example to explain the process of creating a Google Map.

Why Declare HTML5?

<!DOCTYPE html>

Most browsers render pages in HTML5 "standards mode", meaning your application is compatible with major browsers.

Additionally, without a DOCTYPE declaration, browsers render page content in "quirks mode".

Tip: Note that some CSS features used in "quirks mode" are not valid in standards mode. In practice, all percentage-based sizes must be inherited from a parent block element. If no size is specified for the parent element, its default value is 0×0 pixels. To use percentages, you can declare them in a <style> tag as follows:

<style type="text/css">

 html {height:100%}

 body {height:100%;margin:0;padding:0}

 #googleMap {height:100%}

</style>

This style declaration indicates that the map container (GoogleMap) should have a height of 100% of the HTML document.

Adding a Google Maps API Key

In the following example, the first <script> tag must include the Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=_**YOUR_API_KEY**_&sensor=**_TRUE_OR_FALSE_**"></script>

Place your Google-generated API key into the key parameter (key=_YOUR_API_KEY).

The sensor parameter is required and indicates whether your application uses a sensor (e.g., GPS) to determine the user's location. Its value can be set to true or false.

HTTPS

If your application uses secure HTTP (HTTPS), you can load the Google Maps API via HTTPS:

<script src="https://maps.googleapis.com/maps/api/js?key=_**YOUR_API_KEY**_&sensor=**_TRUE_OR_FALSE_**"></script>

Asynchronous Loading

You can also load the Google Maps API after the page has fully loaded.

The following example uses window.onload to load the Google Maps API only after the page finishes loading. The loadScript() function creates the <script> tag to load the Google Maps API. Additionally, the callback=initialize parameter is appended at the end of the script URL, causing the initialize() callback function to execute once the API is fully loaded:

Example

function loadScript(){var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); }window.onload = loadScript;

Try it yourself »

Defining Map Properties

Before initializing the map, we need to create a Map properties object to define certain map attributes:

var mapProp = {

 center:new google.maps.LatLng(51.508742,-0.120850),

 zoom:7,

 mapTypeId: google.maps.MapTypeId.ROADMAP

 };

center (Center Point)

The center property specifies the map's center point, defined by coordinates (latitude, longitude).

Zoom Level

The zoom property specifies the map's zoom level. zoom: 0 shows the entire Earth at the most zoomed-out level.

MapTypeId (Initial Map Type)

The mapTypeId property specifies the initial map type.

mapTypeId includes the following four types:

google.maps.MapTypeId.HYBRID: Displays satellite imagery with transparent main street overlays
google.maps.MapTypeId.ROADMAP: Displays standard street maps
google.maps.MapTypeId.SATELLITE: Displays satellite imagery
google.maps.MapTypeId.TERRAIN: Displays maps with natural features (e.g., terrain and vegetation)

Where to Display the Google Map

Typically, Google Maps are displayed within a <div> element:

<div id="googleMap" style="width:500px;height:380px;"></div>

Note: The map will display at the size specified in the <div>, so you can set the map dimensions directly in the <div> element.

Creating a Map Object

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

The above code creates a new map inside the <div> element (with id="googleMap") using the mapProp parameter.

Tip: To create multiple maps on a single page, simply add additional map objects.

The following example defines four map instances (using different map types):

Example

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Try it yourself »

Loading the Map

The initialize() function is executed after the window loads to initialize the Map object, ensuring the Google Map loads only after the page has fully loaded:

google.maps.event.addDomListener(window, 'load', initialize);

YouTip