StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGoogle map InfoWindow showing all address in the array rather than 1
text
Body
copied!<p>I have a google map and in my InfoWindow it is displaying all of the addresses in the info window. When i move the php variable out of my foreach array under this it only shows the last item in the array. Have i missed finishing the array or not declaring it properly within the infoWindow function?</p> <p>Here is my code for support:</p> <p>UPDATED CODE NOW PULLS IN MARKER_0, MARKER_1 ect instead of address (a,b,c,d).</p> <pre><code><script type="text/javascript"> $(document).ready(function() { //create an array to store lat n lon and type var lat= []; var lon= []; var type= []; var address= []; var restaurant = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000'; var bar = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'; var x=0; //to store index for looping var map = null; //create a map and define it's value to null var markerArray = []; //create a global array to store markers var infowindow; //create infowindow to show marker information //looping for getting value from database using php <?php foreach($latlong as $row): ?> lat.push(<?php echo $row['lat']; ?>); lon.push(<?php echo $row['long']; ?>); type.push(<?php echo $row['type']; ?>); address.push("<?php echo $row['address']; ?>"); x++; <?php endforeach; ?> function initialize() { //set center from the map var myOptions = { zoom: 10, center: new google.maps.LatLng(lat[0], lon[0]), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } //make a new map map = new google.maps.Map(document.getElementById("map"), myOptions); //define value and size for infowindow infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); // Add markers to the map // Set up markers based on the number of elements within the array from database for (var i = 0; i < x; i++) { createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i],address[i], 'marker_'+i); ; } } function createMarker(latlng, type, id, address){ var marker = new google.maps.Marker({ position: latlng, map: map, icon: type, id: id, address:address }); google.maps.event.addListener(marker, 'mouseover', onMarkerClick); markerArray.push(marker); //push local var marker into global array } //create a function that will open infowindow when a marker is clicked var onMarkerClick = function(latlng) { var marker = this; var latLng = marker.getPosition(); infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>'); infowindow.open(map, marker, marker.address); }; window.onload = initialize; }); </script> </code></pre> <p>and in firebug in my script section the data is outputted like this so i know it's pulling in the right info!</p> <p>//looping for getting value from database using php</p> <pre><code>lat.push(lat); lon.push(lng); type.push(restaurant); address.push("A"); x++; lat.push(lat); lon.push(lng); type.push(bar); address.push("B"); x++; lat.push(lat); lon.push(lng); type.push(restaurant); address.push("C"); x++; lat.push(lat); lon.push(lng); type.push(bar); address.push("D"); x++; </code></pre> <p>Any help would be much appreciated.</p>

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