<!DOCTYPE html>
<html>
<head>
<title>Simple Google Maps map with markers powered by spreadsheet data</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map.
*/
#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;
// Initialize the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 39.714161,
lng: -101.533315
},
zoom: 10
});
}
// Create Google Maps markers from spreadsheet data. The data is passed
// directly from the JSONP callback.
function createMarkers(spreadsheetData) {
var bounds = new google.maps.LatLngBounds();
spreadsheetData.feed.entry.forEach(function (item) {
var position = {
lat: Number(item.gsx$latitude.$t),
lng: Number(item.gsx$longitude.$t)
}
var marker = new google.maps.Marker({
position: position,
map: map,
title: item.gsx$city.$t + ', ' + item.gsx$country.$t
});
bounds.extend(position);
})
map.fitBounds(bounds);
}
</script>
<!--
To use this in your own project you need to have your own Google Maps Api key.
https://developers.google.com/maps/documentation/javascript/get-api-key
-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<!--
This is the spreadsheet that was used for this example:
https://docs.google.com/spreadsheets/d/1XyEQ4syGdsjd7cxdQIzJIBhXWFDUVExH32YACBlcsxM
To be able to pull data from a spreadsheet, it needs to be
"Published to the web". In the spreadsheet go to
"File" -> "Publish to the web" -> Click the publish button
The only thing you need to swap out in the script tag below is
the spreadsheet id .../list/YOUR_SPREADSHEET_ID/od6/...
-->
<script src="https://spreadsheets.google.com/feeds/list/1XyEQ4syGdsjd7cxdQIzJIBhXWFDUVExH32YACBlcsxM/od6/public/values?alt=json-in-script&callback=createMarkers"></script>
</body>
<!--
Demo: https://storage.googleapis.com/storage.ubidev.net/google-maps-markers-from-spreadsheet/index.html
-->
</html>