StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's a compromise approach with one infoWindow per maker but the infowindows are not created in advance. Instead, they are created on-demand, as each marker is clicked. </p> <p>This way, infoWindows that will never be seen are not created. And once created, each infoWindow will be reused if the user revisits its marker.</p> <p>Outside the nested i/j loops :</p> <pre><code>var AllMarkers = [];//Not necessary unless used elsewhere function clickMarker_closure(arr) { return function() { if(!this.infoWin) { this.infoWin = new google.maps.InfoWindow({ content: [ "Lat: " + this.position.lat(), "Lng: " + this.position.lng(), "Number of encounters: " + arr[2] ].join("\n") }); } this.infoWin.open(map, this); }; } </code></pre> <p>And the nested i/j loops :</p> <pre><code>for (var i=0; i<ArrayOfAllFilesData.length-1; i++) {//to select certain file. var myarr = ArrayOfAllFilesData[i+1], marker; AllMarkers[i] = [];//necessary? for (var j=0; j < myarr.length; j++) { marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(myarr[j][0], myarr[j][1]), title: 'Click to zoom', visible: true, }); AllMarkers[i][j] = marker;//necessary? google.maps.event.addListener(marker, 'click', clickMarker_closure(myarr[j])); } } </code></pre> <p>Users will be unaware that the infoWindows are created on-demand.</p> <p><strong>Edit 1</strong></p> <ul> <li>Edited above with better knowledge of the structure of the i/j loops and to simplify the closure's reference to its data and marker.</li> <li>infoWindoArray is no longer required.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload