title: Populating gmaps infowindows with data from .json file
body: <p>i currently have a maps project which generates markers and clusters from latitude and longitude data stored in a json file. I am trying to populate the contents of the infowindow with other data, also stored in the json file. Is there a simple way of adjusting my existing code to accommodate this?</p>
  
  <p>The current code:</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script src="data.json"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="markerclusterer.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      function initialize() {
          var center = new google.maps.LatLng(34.777491, 64.5852620);
  
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 3,
              center: center,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
  
          var markers = [];
          for (var i = 0; i &lt; 100; i++) {
              var dataPhoto = data.photos[i];
              var infoWin = new google.maps.InfoWindow();
              var latLng = new google.maps.LatLng(dataPhoto.latitude,
                  dataPhoto.longitude);
              var marker = new google.maps.Marker({
                  position: latLng,
                  icon: "images/gps.svg"
              });
              (function(m, infoWindow, idx) {
                  google.maps.event.addListener(m, 'click', function(evt) {
                      infoWindow.setContent('&lt;p style="color:#008ae6;"&gt;&lt;b&gt;Header&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b&gt;ID:&lt;/b&gt; photo_id&lt;/p&gt;' +
                          '&lt;p&gt;&lt;b&gt;Owner: &lt;/b&gt; owner_id&lt;/p&gt;' +
                          '&lt;p&gt;&lt;b&gt;Upload Date:&lt;/b&gt; upload_date&lt;/p&gt;' +
                          '&lt;button type="button" class="btn btn-primary btn-sm"&gt;&lt;i class="fa fa-bar-chart"&gt;&lt;/i&gt;Button 1&lt;/button&gt; ' + idx);
                      infoWindow.open(map, m);
  
                  })
              })(marker, infoWin, i);
              markers.push(marker);
          }
          var markerCluster = new MarkerClusterer(map, markers, {
              imagePath: 'images/m'
          });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  
  &lt;script&gt;
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-12846745-20']);
      _gaq.push(['_trackPageview']);
  
      (function() {
          var ga = document.createElement('script');
          ga.type = 'text/javascript';
          ga.async = true;
          ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(ga, s);
      })();
  &lt;/script&gt;
  
    &lt;body&gt;
      &lt;div id="map-container"&gt;&lt;div id="map"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/body&gt;  
  </code></pre>
  
  <p>Example of one of the many json fields:</p>
  
  <pre><code>{"photo_id": 57819, "photo_title": "Burg Hohenwerfen", "photo_url": "http://www.panoramio.com/photo/57819", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57819.jpg", "longitude": 13.189259, "latitude": 47.483221, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
  </code></pre>
  
  <p>In the current code I have included fields from the json file where I would like to include the data. Example: <code>'&lt;p&gt;&lt;b&gt;Owner: &lt;/b&gt; owner_id&lt;/p&gt;' +</code></p>
  
  <p>Of course, if I were to just enter some text in these fields it would display the same infowindow for every marker shown on the map. I would like these to be unique to the marker.</p>