Question

Im migrating a working interactive Google Maps V2 to V3 where the web user supplies a zip code through a form field which calls a javascript function that runs a query on the database through a PHP script. The PHP script should return the jscript array.

When the jscript function is called (on clicking the form button), nothing is happening. Or the PHP script isn’t returning a jscript array as expected

The error console doesn’t report any error, and firebug shows the function and array variables as expected, however the array variable is empty.

Can someone who has implemented V3 with search function take a look at what I’m doing and give some advice? Thanks in advance:

from html

Enter Zip Code: <input type="text" id="zip" /><input type="button"
onclick="seachLocationsNear()" value="Search Locations" /></p>

from jscript

 function searchLocationsNear(zip) {
 var zipcode = document.getElementById('zip').value;
 var storeloc = 'dbsearch_genArray.php?zip=' + zipcode;
 }

from php

 //query works as expected, returns $result
 //http://www.octoberblue.net/eztrip/dbsearch_genArray.php
 //using while loop to assign query result to jscript array storeloc
 while ($row = @mysql_fetch_assoc($result)){
 print "storeloc.push($row['address'],$row['lat'],$row['lng']);";
 }

Here is the full javascript
//

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// call setMarkers function on initialization
setMarkers(map, storeloc);
}   

/*
* Define Variables
* storeloc - multidim array, elements title[0],lat[1],lng[2]
* image - string, relative path (from parent html) to icon
* infoWindow - obj, contains info window constructor 
*/
// Works as expected when array is statically defined 
/* var storeloc = [
*   ['4141 Rockside Rd Seven Hills OH', 41.400, -81.663],
*   ['7515 Auburn Road Painesville', 41.66, -81.24],
*   ['2496 E Aurora Road Twinsburg', 41.301218, -81.46940]
*   ];
*/
var image='img/maps_logo.png';   
var infoWindow = new google.maps.InfoWindow({maxWidth:100});
    var marker = new Array();

/*
* dynamically populate the storeloc array when searchLocationsNear() 
* function is called on button click.
*/
function searchLocationsNear(zip) {
var zipcode = document.getElementById('zip').value;
var storeloc = 'dbsearch_genArray.php?zip=' + zipcode;
}

/*
* Define setMarkers function with map and locations parameters
* locations contain storeloc multidim array, called in initialize block.
*/
function setMarkers(map, locations) {
var i;
for (i = 0; i < locations.length; i++) {
  var locate = locations[i];
  var myLatLng = new google.maps.LatLng(locate[1], locate[2]);
  marker[i] = new google.maps.Marker({
     position: myLatLng,
     map: map,
     icon: image,
     title: locate[0]
     });
     google.maps.event.addListener(marker[i],'click',function(){
        markerClick(this);
     });
} //close for loop
} //close setMarkers function

/*
* instanciate InfoWindow for each marker
*/
function markerClick(mark){
var n;
for (n=0; n < marker.length; ++n) {
   if (marker[n] == mark) {
   var infoContent = marker[n].title;
       infoWindow.setContent('<p>Store Location Is:<br>' + infoContent + '</p>');
       infoWindow.open(marker[n], mark);
    }
}
}

/*
* clear markers function, v3 requires the developer to keep
* track of markers and overlays through array.
*/
function clearMarkers() {
infoWindow.close();
var i;
for (i=0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
}
markerArray.length=0;
}

google.maps.event.addDomListener(window,'load',initialize);
 //]]>

As I noted in the comment, the implementation is working as expected when the storeloc array is statically defined. But not when I try and dynamically create the array through user input.

Thanks in advance,
RWhite35

Answer 1

After a long and exhaustive week of “trial and error”, I finally have my interactive Google Maps complete with search by zip code functionality. Here is the short answer to the above.

Users input zip code through a form which runs a PHP query against the client’s MySQL database of store locations. Then using JSON (json_encode()), the PHP array is assigned to a Javascript Array.

 /* assume form input/PHP/MySQL query rans as expect, left out for brevity.
 * $result is a resource id returned by the query process (class object)
 */
 while ($row=@mysql_fetch_assoc($result)){
  $arrLocations[] = (
     array($row['address'],$row['lat'],$row['lng'])
     );
 }
 // Now use JSON to encode the multidim array for JavaScript
 // PHP 5.2 note, must enable in PHP.INI, use cmd line to check: php -i

 $arrPassed = json_encode($arrLocations);

?> //duck out of PHP and in to JS
<script type="text/javascript"> var storeloc = <?php echo $arrPassed ?>;</script>
<?php
//continue PHP and clean up any closures, connections etc.

At this point I have a valid JavaScript multidim array. It can be passed to the setMarkers function above and the rest is go to go. The secret sauce is the JSON encoding. Check the php.net website for json_encode(). This was the cleanest, easiest approach I found to to assigning a PHP multidim array to JavaScript.
Regards,
rwhite35