0

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

4

1 回答 1

0

经过漫长而详尽的一周“试错”后，我终于有了我的交互式谷歌地图，并完成了按邮政编码搜索的功能。这是对上述内容的简短回答。

用户通过一个表单输入邮政编码，该表单针对客户的 MySQL 商店位置数据库运行 PHP 查询。然后使用 JSON (json_encode())，将 PHP 数组分配给 Javascript 数组。

 /* 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.

此时我有一个有效的 JavaScript multidim 数组。它可以传递给上面的 setMarkers 函数，剩下的就是 go to go。秘诀是 JSON 编码。检查 php.net 网站上的 json_encode()。这是我发现将 PHP multidim 数组分配给 JavaScript 的最简洁、最简单的方法。问候， rwhite35

于 2012-04-14T00:14:09.123 回答