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_canvas"), mapOptions); map.setTilt(45); // Multiple Markers var markers = [ ['Alabama ', 34.854209, -85.823041], ['Arizona ', 33.461819, -112.108346], ['Arkansas ', 34.777452, -92.260183], ['California ', 33.881875, -117.547236], ['Northern California ', 37.742624, -121.564290], ['Canada ', 49.684180, -124.990297], ['Colorado ', 39.710876, -104.826624], ['Illinois ', 41.875417, -87.644936], ['Kansas ', 38.027740, -97.903479], ['Louisiana ', 29.991892, -90.049642], ['Maryland ', 38.936588, -76.960488], ['Michigan ', 42.225018, -83.685267], ['Missouri ', 38.523674, -90.538409], ['Nevada', 36.174358, -115.154784], ['New England', 42.008121, -71.799403], ['New Mexico ', 32.313685, -106.747322], ['New Jersey ', 40.988905, -74.309270], ['New York ', 40.797527, -73.342212], ['North Carolina ', 34.754543, -77.427894], ['Ohio - Cleveland', 41.351154, -81.511289], ['Ohio - Dayton', 39.747851, -84.205449], ['Oklahoma ', 35.088705, -97.881448], ['Oregon ', 42.332416, -122.870709], ['Tennessee ', 36.188256, -86.269306], ['Texas - Houston', 29.540747, -95.142007], ['Texas - Austin', 30.480311, -97.673857], ['Texas - West', 31.817117, -102.424450], ['Texas - DFW', 32.759742, -97.063389], ]; // Info Window Content var infoWindowContent = [ ['
'], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], [''], ]; // 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][1], markers[i][2]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); // 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(4); google.maps.event.removeListener(boundsListener); }); }