Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/bars.json

Created March 7, 2017 21:32
Show Gist options
  • Save mattborn/53ee390aa62ea440344294a47401ff9a to your computer and use it in GitHub Desktop.
Save mattborn/53ee390aa62ea440344294a47401ff9a to your computer and use it in GitHub Desktop.
Download ZIP
HoppyHour™ Map
Raw
bars.json
[
{
"lat": 41.879261,
"lng": -87.628403,
"name": "Berghoff"
}
]
Raw
index.html
<!doctype html>
<html>
<head>
<title>HoppyHour™ Map</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY8PoPi7QYHf_EnEpyUUjwUpbaB3F9YMk"></script>
<script src="scripts.js"></script>
</head>
<body>
<!-- google map goes here -->
</body>
</html>
Raw
scripts.js
var markers = [];
var info = [];
google.maps.event.addDomListener(window, 'load', function () {
var map = new google.maps.Map(document.body, {
center: new google.maps.LatLng(41.88, -87.63),
zoom: 15,
});
$.getJSON('bars.json', function (bars) {
bars.forEach(function (bar, index) {
markers[index] = new google.maps.Marker({
animation: google.maps.Animation.DROP,
icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
map: map,
position: new google.maps.LatLng(bar.lat, bar.lng),
});
info[index] = new google.maps.InfoWindow({
content: '<h1>'+ bar.name +'</h1>',
});
markers[index].addListener('click', function () {
info[index].open(map, markers[index]);
});
});
});
});
Raw
styles.css
body {
height: 100vh;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment