Willcode4cash icon

Google Maps w/multiple markers Pt. 2

Willcode4cash | PRO | 06/06/17 09:32:45 PM UTC | 0 ⭐ | 262 👁️ | Never ⏰ | []
HTML |

2.28 KB

|

None

|

0 👍

/

0 👎

<!DOCTYPE html>
<html> 
<head> 
  <title>Google Maps Multiple Markers</title> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
  <script src="http://maps.google.com/maps/api/js?key=<INSERT YOUR OWN DAMN KEY>" type="text/javascript"></script>
  <script type="text/javascript">
    var map;
    var centerLatLng = new google.maps.LatLng(-33.92, 151.25);
 
    // Create the map, define zoom level, set center point and declare map type
    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: centerLatLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
      });
 
      // When the map container is re-sized, reset the center point of the map
      google.maps.event.addDomListenerOnce(map, 'idle', function () {
        google.maps.event.addDomListener(window, 'resize', function () {
            map.setCenter(centerLatLng);
        });
      });
    }
 
    // Accepts the array of markers and places those markers, with titles on the map.
    function loadMarkers(locations) {
      for (var i = 0; i < locations.length; i++) {  
        new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          title: locations[i][0]
        });
      }
    }
 
    // Once the page is finshed loading ...
    $(document).ready(function() {
      // Initialize the map, 
      initialize();
 
      // Load the markers to the map. Since the markers are loaded after the page is 
      // loaded, the marker data can be loaded in the view.
      loadMarkers([
          ['Bondi Beach', -33.890542, 151.274856],
          ['Coogee Beach', -33.923036, 151.259052],
          ['Cronulla Beach', -34.028249, 151.157507],
          ['Manly Beach', -33.800101, 151.287478],
          ['Maroubra Beach', -33.950198, 151.259302]
        ]);
    });
  </script>
  <style>
      body {
        margin: 0;
        padding: 0;
      }
 
      #map {
        margin: 5px;
        border: 1px solid #333;
        height: 300px;
      }
  </style>
</head> 
<body>
  <div id="map" name="map"></div>
</body>
</html>

Comments