HTML Google Maps

HTML Google Maps

A Basic Web Page

To demonstrate how to add a Google Map to a web page, we will use a basic HTML page :

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>
Click here to Run the Program

Set the Map Size

Set the size of the map :

Example

<div id="map" style="width:400px;height:400px">
Click here to Run the Program

Create a Function to Set The Map Properties

This example defines a Google Map centered in London, England :

Example

function myMap() 
{
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Click here to Run the Program

Example Explained

The mapOptions variable defines the properties for the map.

The center property specifies where to center the map (using latitude and longitude coordinates).

The zoom property specifies the zoom level for the map (try to experiment with the zoom level).

The mapTypeId property specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.

The line: var map=new google.maps.Map(document.getElementById("map"), mapOptions); creates a new map inside the <div> element with id="map", using the parameters that are passed (mapOptions).

Add the Google Maps API

Finally, show the map on the page !

The functionality of the map is provided by a JavaScript library located at Google. Add a script to refer to the Google Maps API with a callback to the myMap function :

Example

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Click here to Run the Program