yudaduy

Multiple Marker Example

Sep 19th, 2021 (edited)
713
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Marker Clustering</title>
  5.     <style>
  6.         /* Always set the map height explicitly to define the size of the div
  7.        * element that contains the map. */
  8.         #map {
  9.         height: 100%;
  10.         }
  11.  
  12.         /* Optional: Makes the sample page fill the window. */
  13.         html,
  14.         body {
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.         }
  19.     </style>
  20.  
  21.     <!-- jsFiddle will insert css and js -->
  22.   </head>
  23.   <body>
  24.     <div id="map"></div>
  25.  
  26.     <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  27.     <script
  28.      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2"
  29.      async
  30.    ></script>
  31.  
  32.     <script>
  33.     function initMap() {
  34.  
  35.         var map = new google.maps.Map(document.getElementById('map'), {
  36.             zoom: 4,
  37.             center: { lat: -28.024, lng: 140.887 },
  38.         });
  39.  
  40.         const markers = locations.map((location, i) => {
  41.           return new google.maps.Marker({
  42.             position: new google.maps.LatLng(locations[i][0], locations[i][1]),
  43.             map: map
  44.           });
  45.         });
  46.  
  47.     }
  48.      
  49.     const locations = [
  50.     [-31.56391,147.154312],
  51.     [-33.718234,150.363181],
  52.     [-33.727111,150.371124],
  53.     [-33.848588,151.209834],
  54.     [-33.851702,151.216968],
  55.     [-34.671264,150.863657],
  56.     [-35.304724,148.662905],
  57.     [-36.817685,175.699196],
  58.     [-36.828611,175.790222],
  59.     [-37.75,145.116667],
  60.     [-37.759859,145.128708],
  61.     [-37.765015,145.133858],
  62.     [-37.770104,145.143299],
  63.     [-37.7737,145.145187],
  64.     [-37.774785,145.137978],
  65.     [-37.819616,144.968119],
  66.     [-38.330766,144.695692],
  67.     [-39.927193,175.053218],
  68.     [-41.330162,174.865694],
  69.     [-42.734358,147.439506],
  70.     [-42.734358,147.501315],
  71.     [-42.735258,147.438],
  72.     [-43.999792,170.463352],
  73.     ];
  74.  
  75.     </script>
  76.   </body>
  77. </html>
RAW Paste Data