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.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Parks Mashup</title>
	</head>
	<body>
	
	</body>
	</html>

Add the Google Maps code by using a script tag right above <body>. Replace YOUR_API_KEY with the API key that you got from Google.


	<!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>

Create an empty div element above the script element and give it an id of "map". This is where your map will be displayed.


	<!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>

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.


<!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>

After the data array, create a map initiation function that will be called after the Google Maps API loads.


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
	zoom: 4,
	center: new google.maps.LatLng(44, -110),
	mapTypeId: 'terrain'
});
}

Write a function to add markers to the map.


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
	});
}
}

Call the mashParks function from the end of the initMap function, passing it your parks data as a parameter.


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
	zoom: 4,
	center: new google.maps.LatLng(44, -110),
	mapTypeId: 'terrain'
});
	mashParks(parks);
}

Check your work. Your final HTML page should look like this:


<!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>

Open your web page in a browser to see the results.