Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by Wolf

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map"></div>

CSS

html,
 body,
 #map {
   height: 100%;
   width: 100%;
   margin: 0px;
   padding: 0px;
 }

JavaScript

function initialize() {

      var beaches = [
        ['Bondi Beach2', -33.781552, 151.274846, 1],
        ['Bondi Beach', -33.890542, 151.274856, 1]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.88, 151.28),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });


      const t1 = performance.now();
      for (var i = 0; i < 10000; i++) {
        new google.maps.Marker({
          position: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
          map: map,
          optimized: false,
          icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        });
      }
      const t2 = performance.now();
      console.log('generating markers with icon object time', t2 - t1);

      const t3 = performance.now();
      for (var i = 0; i < 10000; i++) {
        new google.maps.Marker({
          position: new google.maps.LatLng(beaches[1][1], beaches[1][2]),
          map: map,
          optimized: false,
          icon: {
            url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
          }
        });
      }
      const t4 = performance.now();
      console.log('generating markers with icon string time', t4 - t3);
    }

    initialize();