Google Maps Basic
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Google Maps Basic
❮ Previous
Next ❯
Create a Basic Google Map
This example creates a Google Map centered in London, England:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
Try it Yourself »
The rest of this page describes the example above, step by step.
The Map Container and Size
The map needs an HTML element to hold the map:
<div id="googleMap" style="width:100%;height:400px"></div>Also set the size of the map.
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Create a Function to Set The Map Properties
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
The mapProp 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 line: var map=new google.maps.Map(document.getElementById("googleMap"),
mapProp); creates a new map inside the <div> element with
id="googleMap", using the parameters that are passed (mapProp).
Multiple Maps
The example below defines four maps with different
map types:
Example
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
Try it Yourself »
Free Google API Key
Google allows a website to call any Google API for free, thousands of times a day.
Go to https://console.developers.google.com to get a free
API key.
Google Maps expects to find the API key in the key parameter when loading an API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
❮ Previous
Next ❯
