map.js

    // Define your locations: HTML content for the info window, latitude, longitude
    var locations = [
    //North America
    ['<h4>Seattle</h4>', 47.614848,-122.3359058],
    ['<h4>San Jose</h4>', 37.2970155,-121.8174109],
    ['<h4>Los Angeles</h4>', 34.0204989,-118.4117325],
    ['<h4>Chicago</h4>', 41.8337329,-87.7321555],
    ['<h4>Dallas</h4>', 32.8206645,-96.7313396],
    ['<h4>Toronto</h4>', 43.7182412,-79.378058],
    ['<h4>Newark</h4>', 40.73454,-74.16375],
    ['<h4>Ashburn</h4>', 39.0299604,-77.4771231],
    ['<h4>Atlanta</h4>', 33.7677129,-84.420604],
    ['<h4>Miami</h4>', 25.782324,-80.2310801],
    //South America
    ['<h4>Medellín</h4>', 6.268678,-75.596392],
    ['<h4>Lima</h4>', -12.0553442,-77.0451853],
    ['<h4>Valparaíso</h4>', -33.0507081,-71.6110485],
    ['<h4>Sáo Paulo</h4>', -23.6824124,-46.5952992],
    ['<h4>Buenos Aires</h4>', -34.6158238,-58.4333203],
    //Europe
    ['<h4>Düsseldorf</h4>', 51.2384547,6.8143502],
    ['<h4>Amsterdam</h4>', 52.3747158,4.8986142],
    ['<h4>Dublin</h4>', 53.3243201,-6.245704],
    ['<h4>London</h4>', 51.5286416,-0.1015987],
    ['<h4>Paris</h4>', 48.8588589,2.3470599],
    ['<h4>Madrid</h4>', 40.4379543,-3.6795367],
    ['<h4>Marseille</h4>', 43.2803905,5.405139],
    ['<h4>Milan</h4>', 45.4627338,9.1777323],
    ['<h4>Bucharest</h4>', 44.4378258,26.0946376],
    ['<h4>Vienna</h4>', 48.2206849,16.3800599],
    ['<h4>Prague</h4>', 50.0596696,14.4656239],
    ['<h4>Warsaw</h4>', 52.232938,21.0611941],
    ['<h4>Stockholm</h4>', 59.326142,17.9875454],
    ['<h4>Frankfurt</h4>', 50.121212,8.6365638],
    //Africa&Middle East
    ['<h4>Johannesburg</h4>', -26.1715215,28.0400245],
    ['<h4>Mombasa</h4>', -4.0356052,39.666089],
    ['<h4>Dubai</h4>', 25.073858,55.2298444],
    ['<h4>Doha</h4>', 25.3040033,51.5294588],
    ['<h4>Muscat</h4>', 23.5840088,58.4236662],
    ['<h4>Kuwait City</h4>', 29.3760648,47.9818853],
    //Other
    ['<h4>Tokyo</h4>', 35.673343,139.710388],
    ['<h4>Osaka</h4>', 34.6784,135.49515],
    ['<h4>Seoul</h4>', 37.5651,126.98955],
    ['<h4>Hong Kong</h4>', 22.3593252,114.1408686],
    ['<h4>Singapore</h4>', 1.3147308,103.8470128],
    ['<h4>Sydney</h4>', -33.7969235,150.9224326],
    ['<h4>Auckland</h4>', -36.8630231,174.8654693],
    ['<h4>Melbourne</h4>', -37.8602828,145.079616],
    ];
    
    // 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();


    $('[data-event]').on('click', function() {
      _gs('event', $(this).data('event'));
    });