Google Maps Basics

Create a Simple Google Map

Now let's create a simple Google Map.

Below is a Google Map showing London, England:

Example analysis

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

Why should the application declare HTML5?

Most browsers render pages using HTML5 documents in "standard mode", which means your application is compatible with all major browsers.

Additionally, without a DOCTYPE tag, browsers use quirks mode to render page content.

Tip:It should be noted that some CSS in quirks mode is not applicable in standard 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 them in the <style> tag, as shown below:

This style declaration indicates that the map module (GoogleMap) should have an HTML height of 100%.

Add Google Maps API Key

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

Place the API key generated by Google inkeyIn the parameter (key=YOUR_API_KEY)。

The sensorThe parameter is required. It is used to indicate whether the application uses a sensor (such as GPS navigation) to determine 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:

Asynchronous loading

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

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

Define map properties

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

center (center point)

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

Zoom (zoom level)

The zoom property specifies the zoom level of the map. zoom: 0 shows the entire map of the world fully zoomed out.

MapTypeId (map's initial type)

The mapTypeId property specifies the initial type of the map.

mapTypeId includes the following four types:

• google.maps.MapTypeId.HYBRID: Displays a transparent layer of major streets on satellite imagery
• google.maps.MapTypeId.ROADMAP: Displays an ordinary street map
• google.maps.MapTypeId.SATELLITE: displays satellite imagery
• google.maps.MapTypeId.TERRAIN: Displays a map with natural features (such as terrain and vegetation)

Where to display the Google Map

Usually, a Google Map is used within a <div> element:

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

Create a Map object.

The above code uses the parameter (mapProp) to create a new map in the <div> element (with id 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):

Load Map

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