Table of contents

Why should the application declare HTML5?

Add Google Maps API Key

Define map properties

Where to show Google Maps

Create a Map object

load map

Google Maps Basics

Create a simple Google Map

Now let's create a simple Google Map.

Here is a Google Map showing London, UK:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script>
 
<script>
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);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
 
</body>
</html>

Example analysis

We use the above example to analyze the creation process of Google Maps.

Why should the application declare HTML5?

<!DOCTYPE html>

Most browsers use "standards mode" HTML5 documents to render pages, which means your application is compatible with all major browsers.

In addition, if there is no DOCTYPE tag, the browser uses mixed mode (quirks mode) to render the page content.

Tip: It should be noted that some CSS in "mixed mode" cannot be used in standards mode. In a specific application, all percentage-based sizes must be inherited from the parent block element. If no size is specified in the parent module, the default value is 0 x 0 pixels. If you want to use percentages, you can declare it in the <style> tag, like this:

<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 module (GoogleMap) should have an HTML height of 100%.

Add Google Maps API Key

In the following examples the Google Maps API must be included in the first <script> tag:

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

Place the API key generated by google in the key parameter (key= YOUR_API_KEY) .

The sensor parameter is required and is used to indicate whether the application uses a sensor (similar to GPS navigation) to locate the user's location. The parameter value can be set to true or false.

HTTPS

If your application is a secure HTTP (HTTPS: HTTP Secure) application, you can use HTTPS to load the Google Maps API:

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

Asynchronous loading

Similarly, we can also load the Google Maps API after the page is fully loaded.

The following example uses window.onload to load Google Maps after the page is fully loaded. The loadScript() function creates the <script> tag that loads the Google Maps API. In addition, the callback=initialize parameter is added at the end of the tag. The initialize() function as a callback function will be executed after the API is fully loaded:

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;

Define map properties

Before initializing the map, we need to create a Map property object to define some map properties:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

center

The center property specifies the center of the map, which creates a center point on the map via coordinates (latitude, longitude).

Zoom (zoom level)

The zoom attribute specifies the zoom level of the map. zoom: 0 shows full zoom of the entire Earth map.

MapTypeId (initial type of map)

The mapTypeId attribute specifies the initial type of the map.

mapTypeId includes the following four types:

google.maps.MapTypeId.HYBRID: Displays the main street transparent layer of the satellite image
google.maps.MapTypeId.ROADMAP: Displays a normal street map
google.maps.MapTypeId.SATELLITE: Display satellite images
google.maps.MapTypeId.TERRAIN: Displays maps with natural features such as terrain and vegetation

Where to show Google Maps

Typically Google Maps are used inside a <div> element:

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

Note: The map will display the size of the map at the size set in the div, so we can set the size of the map in the <div> element.

Create a Map object

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

The above code uses the parameter (mapProp) to create a new map in the <div> element (id is googleMap).

Tip: If you want to create multiple maps on the page, you only need to add new map objects.

The following example defines four map instances (the four maps use different map types):

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);

load map

After the window is loaded, the Map object is initialized by executing the initialize() function. This ensures that the Google Map is loaded after the page is fully loaded:

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