function initialize() {

  // Plotting the valley coordinates
  var theValley = new google.maps.LatLng(26.1497977, -97.9136112);
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  // Header "A University for the Valley"
  var myControl = document.getElementById('map-title');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);

    // Setup the different icons and shadows
    var iconURLPrefix = '[system-asset]/_files/assets/images/map/[/system-asset]';
    
    // City marker images
    var icons = [
      iconURLPrefix + 'Rio-Grande.png',
      iconURLPrefix + 'Edinburg.png',
      iconURLPrefix + 'McAllen.png',
      iconURLPrefix + 'Harlingen.png',
      iconURLPrefix + 'South-Padre.png',
      iconURLPrefix + 'Brownsville.png'
    ]
    var iconsLength = icons.length;

    // City content, coordinates and identification
    var locations = [
      ['rgcContent', 26.370005, -98.853275, 6],
      ['edinburgContent', 26.3042, -98.1639, 5],
      ['mcallenContent', 26.188601, -98.238412, 4],
      ['harlingenContent', 26.174706, -97.7, 3],
      ['spiContent', 26.075211, -97.158540, 2],
      ['brownsvilleContent', 25.898916, -97.494467, 1]
    ];

    // Declaring the infoWindow popup
    var infowindow = new google.maps.InfoWindow();

    var markers = new Array();

    var iconCounter = 0;

    var contentArray = $(".markerInfo");
    
    // 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],
        contentHtml: contentArray[i].innerHTML
      });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var contentHtml = $(marker.divId);
          infowindow.setContent(marker.contentHtml);
          infowindow.open(map, marker);
        }
      })(marker, i));

    iconCounter++;
    
    // Adjust the zoom of the map depending on viewport.
    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();
  }
};

google.maps.event.addDomListener(window, 'load', initialize);