ATM Finder

Google Maps - show a map with certain locations, then use geolocation to find the nearest ones.

by kthornbloom

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 80%;
}

JavaScript

// ATM locations- name, lat, long, id
var locations = [
  ['Solidarity Main Office', 40.443290, -86.130357, 1],
  ['Village Pantry West', 40.461678, -86.165093, 2],
  ['Marsh Hometown Market', 40.499102, -86.134860, 3],
  ['Indiana University Kokomo', 40.459445, -86.131655, 4],
  ['K-Mart', 40.492145, -86.164986, 5],
  ['Heartland Market', 40.477973, -85.966806, 6],
  ['Forest Park Shopping Plaza', 40.490117, -86.158528, 7],
  ['Village Pantry', 40.487592, -86.183477, 8],
  ['Financial Builders FCU Office', 40.453981, -86.126825, 9],
  ['Community Howard Regional Health System', 40.447071, -86.125245, 10],
  ['Waddells IGA', 40.417462, -86.270964, 11],
  ['Blimpies', 40.509221, -86.115330, 12],
  ['Kokomo Sport Bowl', 40.463912, -86.100728, 13],
  ['Ivy Tech Conference & Event Center', 40.501175, -86.108595, 14],
  ['Kokomo Plaza - SR 931', 40.480268, -86.107796, 15],
  ['Kokomo High School', 40.456189, -86.157467, 16]
];

// Create Map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(40.486427, -86.133603),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Iterate through locations & make markers
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

google.maps.event.addListener(map, 'click', find_closest_marker);

function rad(x) {
  return x * Math.PI / 180;
}

map.markers = [];

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    map.markers.push(marker);
}

function find_closest_marker(event)...