Google Maps Basics

Creating a Simple Google Map

Now let's create a simple Google Map.

Here is a Google Map showing London, UK:

Example

<!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 Explanation

Let's dissect the process of creating a Google Map using the above example.

Why Declare HTML5?

Most browsers render pages in "standards mode" using the HTML5 document, which means your application is compatible across various browsers.

Additionally, without the DOCTYPE tag, browsers render pages in quirks mode.

Note: Some CSS in quirks mode may not be applicable in standards mode. In specific applications, all percentage-based sizes must be inherited from the parent block element. If no size is specified in the parent module, the default is 0 x 0 pixels. If you want to use percentages, you can declare them in the <style> tag as shown:

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

Adding a 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 in the key parameter (key=YOUR_API_KEY).

The sensor parameter is mandatory and indicates whether the application uses a sensor (like GPS) 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) application, you can load the Google Maps API using HTTPS.

Asynchronous Loading

We 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 after the page has fully loaded. The loadScript() function creates a <script> tag to load the Google Maps API, and the callback=initialize parameter is added at the end of the tag. The initialize() function is executed as a callback after the API has 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;

Defining Map Properties

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

center (Center Point)

The center property specifies the center of the map, which is created by coordinates (latitude, longitude) on the map.

Zoom (Zoom Level)

The zoom property specifies the zoom level of the map. zoom: 0 displays the entire Earth map in full zoom.

MapTypeId (Initial Map 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 images
google.maps.MapTypeId.ROADMAP: Displays a normal street map
google.maps.MapTypeId.SATELLITE: Displays satellite images
google.maps.MapTypeId.TERRAIN: Displays a map with natural features like terrain and vegetation

Where to Display the Google Map

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

Note: The map will display based on the size set in the <div> element, so we can set the map size within the <div> element.

Creating a Map Object

The above code creates a new map with parameters (mapProp) in the <div> element (id is googleMap).

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

The following example defines four map instances (each with a different map type):

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

Loading the Map

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

❮ Ref Mapoptions Ref Getzoom ❯