By Nathan Yang
Add an empty <div> to the body of an HTML page with an ID attribute (in this example, we are using the id map):
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Your Page Title Here</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
Create a CSS file and add the following CSS code:
map.css
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map {
height: 100%
}
Include the CSS file in the HTML page:
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Your Page Title Here</title>
<link rel="stylesheet" href="map.css">
</head>
<body>
<div id="map"></div>
</body>
</html>
Include the Google Maps JavaScript file:
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Your Page Title Here</title>
<link rel="stylesheet" href="map.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Create a JavaScript file and add the following JavaScript code:
map.js
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(38.983064, -76.9473872) // Van Munching Hall
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
There are two required options for every map: center and zoom.
The center property is set by a LatLng object that contains a latitude and a longitude and is used to center your map.
The zoom property sets the initial resolution to display the map, where zoom: 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.
Include the JavaScript file you just created:
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Your Page Title Here</title>
<link rel="stylesheet" href="map.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="map.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The following example adds a simple marker to a Google Map at the Van Munching Hall:
map.js
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(38.983064, -76.9473872) // Van Munching Hall
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: new google.maps.LatLng(38.983064, -76.9473872), // Van Munching Hall,
map: map,
title: "Van Munching Hall"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
The marker's title appears as a tooltip upon hover.
Let's add a second marker with a different icon. Since we are going to have multiple markers, it is best to create an array to hold the markers. The second marker will be at the Smith Store.
map.js
var markers = []; // Array that stores markers
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(38.983064, -76.9473872) // Van Munching Hall
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// To add the marker to the map, use the 'map' property
markers[0] = new google.maps.Marker({
position: new google.maps.LatLng(38.983064, -76.9473872), // Van Munching Hall,
map: map,
title: "Van Munching Hall"
});
markers[1] = new google.maps.Marker({
position: new google.maps.LatLng(38.9827089, -76.9475412), // Smith Store,
map: map,
title: "The Smith Store",
icon: "http://maps.google.com/mapfiles/ms/micons/shopping.png"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
The icon property contains the marker's image URL. Click here for a set of pre-defined icons that you can use as markers in your Google Maps. In Chrome, you can right click on one of the image icons, click "Copy Image URL," and paste the image URL into the icon property.
You can display an info window when a user mouses over a specific marker. In this example, we are going to add info windows on the Van Munching Hall marker and the Smith Store marker.
map.js
var markers = []; // Array that stores markers
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(38.983064, -76.9473872) // Van Munching Hall
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// To add the marker to the map, use the 'map' property
markers[0] = new google.maps.Marker({
position: new google.maps.LatLng(38.983064, -76.9473872), // Van Munching Hall,
map: map,
title: "Van Munching Hall"
});
markers[1] = new google.maps.Marker({
position: new google.maps.LatLng(38.9827089, -76.9475412), // Smith Store,
map: map,
title: "The Smith Store",
icon: "http://maps.google.com/mapfiles/ms/micons/shopping.png"
});
var vmhInfoWindow = new google.maps.InfoWindow({
content: "Van Munching Hall is home to the University of Maryland's Robert H. Smith School of Business."
});
var smithStoreInfoWindow = new google.maps.InfoWindow({
content: "The Smith Store is a student-run organization dedicated to providing students with practical, hands-on management experience who in turn, help to promote the Smith brand."
});
google.maps.event.addListener(markers[0], 'mouseover', function() {
vmhInfoWindow.open(map, this);
});
google.maps.event.addListener(markers[0], 'mouseout', function() {
vmhInfoWindow.close();
});
google.maps.event.addListener(markers[1], 'mouseover', function() {
smithStoreInfoWindow.open(map, this);
});
google.maps.event.addListener(markers[1], 'mouseout', function() {
smithStoreInfoWindow.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
To remove a marker from the map, call the setMap() method passing null as the argument.
map.js
marker.setMap(null);
If you are using an array to store your map markers, you can iterate through the markers array and call the setMap()` method to remove all markers from the map.
map.js
for (int idx = 0; idx < markers.length; idx++) {
markers[idx].setMap(null);
}