HTML Google Maps
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
HTML Google Maps
❮ Previous
Next ❯
Google Maps allows you to display maps on your web page:
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);
}
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>
Try it Yourself »
Set the Map Size
Set the size of the map:
Example
<div id="map" style="width:400px;height:400px">
Try it Yourself »
<!--
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
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);
}Try it Yourself »
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>Try it Yourself »
Go to our Google Maps Tutorial to learn more about Google Maps.
❮ Previous
Next ❯