map.js

jQuery(function($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.setTilt(45);

    var arr = $('#map').data('info');

    // Multiple Markers
    var markers = arr;

    console.log(arr);

    function all(){
      var hello = [];
      for( i = 0; i < arr.length; i++ ) {
        var bar = [];
        var title = arr[i][2];
        var link = arr[i][3];
        var string = '<div class="info_content"><h3>'+ title +'</h3><a href='+ link +'>Go to this locations Jobs</a></div>'
        bar.push(string);
        hello.push(bar);
      };
      return hello;
    }

    var content = all();
    // Info Window Content
    var infoWindowContent = content;

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map
        });

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    // var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    //     this.setZoom(16);
    //     google.maps.event.removeListener(boundsListener);
    // });

    google.maps.event.addDomListener(window, "resize", function() {
        google.maps.event.trigger(map, "resize");
         map.setCenter( bounds.getCenter() );
    });

    $('select#foo').change(function() {
      var location_id = $(this).find("option:selected").data('value');
      console.log(location_id );
      marker = map.markers[location_id];
      marker.infoWindow.open(map,marker);
      if($(this).find("option:selected").data('value') == '9'){
        map.setCenter();
      }
    });

}