Google Maps Code

googlemaps_locations.js

<script>
    // Define your locations: HTML content for the info window, latitude, longitude
    var locations = [
    ['<h4>Seattle</h4>', 47.614848,-122.3359058],
    ['<h4>Los Angeles</h4>', 34.0204989,-118.4117325],
    ['<h4>Chicago</h4>', 41.8337329,-87.7321555],
    ['<h4>New York</h4>', 40.7033127,-73.979681],
    ['<h4>Virginia</h4>', 38.0033854,-79.4587861],
    ['<h4>Atlanta</h4>', 33.7677129,-84.420604],
    ['<h4>Dallas</h4>', 32.8206645,-96.7313396],
    ['<h4>San Francisco</h4>', 37.7577,-122.4376],    
    ['<h4>Amsterdam</h4>', 52.3747158,4.8986142],  
    ['<h4>Frankfurt</h4>', 50.121212,8.6365638],
    ['<h4>London</h4>', 51.5286416,-0.1015987],
    ['<h4>Paris</h4>', 48.8588589,2.3470599],
    ];
    
    // Setup the different icons and shadows
    var iconURLPrefix = 'https://maps.google.com/mapfiles/ms/icons/';
    
    var icons = [
    iconURLPrefix + 'red-dot.png',
    iconURLPrefix + 'green-dot.png',
    iconURLPrefix + 'blue-dot.png',
    iconURLPrefix + 'orange-dot.png',
    iconURLPrefix + 'purple-dot.png',
    iconURLPrefix + 'pink-dot.png',      
    iconURLPrefix + 'yellow-dot.png'
    ]
    var iconsLength = icons.length;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 1,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      draggable: false,
      scrollwheel: false, 
      disableDoubleClickZoom: true,
      panControl: false,
      zoomControl: false,
      disableDefaultUI: true,
      zoomControlOptions: {
       position: google.maps.ControlPosition.LEFT_BOTTOM
     }
   });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 160
    });

    var markers = new Array();
    
    var iconCounter = 0;
    
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
        iconCounter = 0;
      }
    }

    function autoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      for (var i = 0; i < markers.length; i++) {  
        bounds.extend(markers[i].position);
      }
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    autoCenter();
  </script> 
  <script>
    $('[data-event]').on('click', function() {
      _gs('event', $(this).data('event'));
    });</script>