How to Create a Simple Google Maps Mashup
It's possible, and fairly simple, to put almost anything you want on a map. Examples of existing Google Maps mashups include:
- City guides
- Comparative gas pricing apps
- Restaurant locating apps
- And many more!
In this how to, you'll learn how to create a mashup with Google Maps.
Before you can use Google Maps in your own application, you'll need to get an API key. An API key is a unique series of numbers and letters that a web service provider (such as Google) can use to keep track of who is using their services. Google Maps API keys are free, and use of Google Maps is free for developers.
- Go to https://developers.google.com/maps and click on the Get Started link at the top of the page. You'll see a list of available APIs that you can choose from.
- Choose the Google Maps JavaScript API. The resulting page contains tutorials and a link named Get a Key at the top of the page.
- Click the Get a Key link. A popup window will appear, asking you to select or create a project.
- Select "Create a new project" and name your new project "Parks Map".
- Click on Create and Enable API. After a moment, you'll see your API key.
- Click on the link to the right of the API key to copy it, and then paste it into a text document. You'll need this key shortly.
- Click on Finish to close the popup window.
- Create a new HTML document in your code editor, containing the following basic HTML5 template.
- Add the Google Maps code by using a script tag right above
<body>
. ReplaceYOUR_API_KEY
with the API key that you got from Google. - Create an empty div element above the script element and give it an id of "map". This is where your map will be displayed.
- Create another script element just below the empty div. Inside it, create a map variable and an array containing park data. I've done the work for you to create an array containing two U.S. National Parks. Feel free to use Google search to find more parks and to add them to the array.
- After the data array, create a map initiation function that will be called after the Google Maps API loads.
- Write a function to add markers to the map.
- Call the mashParks function from the end of the
initMap
function, passing it your parks data as a parameter. - Check your work. Your final HTML page should look like this:
- Open your web page in a browser to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parks Mashup</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parks Mashup</title>
</head>
<body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parks Mashup</title>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parks Mashup</title>
</head>
<body>
<div id="map"></div>
<script>
var map;
var parks = [
{"park":"Yellowstone","coords":[44.4280,-110.5885]},
{"park":"Glacier","coords":[48.7596, -113.7870]}
];
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(44, -110),
mapTypeId: 'terrain'
});
}
function mashParks(results) {
for (var i = 0; i < results.length; i++) {
var coords = results[i].coords;
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label:results[i].park
});
}
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(44, -110),
mapTypeId: 'terrain'
});
mashParks(parks);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var parks = [
{"park":"Yellowstone","coords":[44.4280,-110.5885]},
{"park":"Glacier","coords":[48.7596, -113.7870]}
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(44, -110),
mapTypeId: 'terrain'
});
mashParks(parks);
}
function mashParks(results) {
for (var i = 0; i < results.length; i++) {
var coords = results[i].coords;
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label:results[i].park
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTM5RKrtCLpZAj5HU3K3cTvFNB240NsBg&callback=initMap">
</script>
</body>
</html>