X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Google Maps Basic


Create a Basic Google Map

Now, we are ready to create a basic Google Map.

The example below creates a Google Map centered on London, England:

Example

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</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>

Try it yourself »


Example Explained - Step By Step

The rest of this page explains the example above line by line.

Why Declare The Application as HTML5?

<!DOCTYPE html>

Most browsers will render pages with the HTML5 doctype in "standards mode" which means that your application is more cross-browser compliant.

Additionally, browsers that don't understand it will ignore it, and use "quirks mode" to display their content.

Tip: Be aware that some CSS that works within quirks mode is not valid in standards mode. In specific; all percentage-based sizes must inherit from parent block elements. If any of those ancestors fail to specify a size, they are set to 0 x 0 pixels. If you want to use percent, include the following <style> declaration:

<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 take up 100% of the height of the HTML body.


Add Google Maps API Key

The first <script> tag in the example above is required, and it includes the Google Maps API:

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

Insert your generated API key in the required key parameter (key=YOUR_API_KEY).

The sensor parameter is required and it indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location. Set this value to either true or false.

HTTPS

If your application is an HTTP Secure application, load the Google Maps API over HTTPS instead:

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

Asynchronously Loading

It is also possible to load the Google Maps API after the page has finished loading, or on demand.

The example below uses window.onload to load the Google Maps API after the page has fully loaded. The loadScript() function creates the Google Maps API <script> tag. In addition, the callback=initialize parameter is added to the end of the URL to only execute the initialize() function after the API is fully loaded:

Example

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?      key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Try it yourself »


Define Properties For The Map

To initialize a Map, we first create a Map properties object to define some properties for the map:

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

Center

The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.

Zoom

The zoom property specifies the initial zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

MapTypeId

The mapTypeId property specifies the initial map type to display.

The following map types are supported:

  • ROADMAP (normal, default 2D map)
  • SATELLITE (photographic map)
  • HYBRID (photographic map + roads and city names)
  • TERRAIN (map with mountains, rivers, etc.)

Where to Show the Google Map

A named <div> element is often used to hold/show the Google Map:

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

Note: The map will always take its size from its containing element. So, always set a size on that <div> element.


Create a Map Object

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

The code above creates a new map inside the <div> element (googleMap) using the parameters that are passed (mapProp).

Tip: To create several maps on one page, just add new map objects.

The example below defines four maps on one page (four maps with 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

Execute the initialize() function that constructs the Map object on window load, to ensure that the map is placed on the page after the page is fully loaded:

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


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook