Jquery, JSON, PHP and GMaps

Hi all,

I am turning in circles and are hoping for some clarification by you guys ...

1) I have a site, using jquery and a Goolge Maps Plugin (http://plugins.jquery.com/project/gmap).
This all works perfectly and I get my markers set right and I really like this solution. This is how it looks like:

<script type="text/javascript" src="http://www.google.com/jsapi?key=MyGmapKey"&gt;&lt;/script&gt;
<script type="text/javascript">
google.load("jquery", '1.3');
google.load("maps");
</script>
<script type="text/javascript" src="/code/js/jquery.gmap-1.1.0-min.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
 $("#map1").gMap(
 {
   latitude:               48.7,
   longitude:              13.4667,
   zoom:                   9,
   markers:                [{latitude: 48.461117, longitude: 13.418795, html: "MY Info Box 1"},
      {latitude: 48.531602, longitude: 12.942087, html: "Another Info Box"},
      {latitude: 48.198242, longitude: 13.536017, html: "Guess what? Thgis is INFO Text!"},
      {latitude: 48.325327094, longitude: 14.0712547302, html: "INFO"},
      {latitude: 48.7, longitude: 13.4667,icon: { image:  "images/My_Position.png", iconsize: [20, 34], iconanchor: [5, 34], infowindowanchor: [5, 2], infoshadowanchor: [14, 25] },  html: "Your current position: 48.7 | 13.4667, Germany"}],
controls:               ["GSmallZoomControl3D", "GMapTypeControl"],
scrollwheel:            true,
maptype:                G_HYBRID_MAP,
html_prepend:           '<div class="gmap_marker">',
html_append:            '</div>',
icon:
{
  image:              "images/gmap_pin.png",
  shadow:             false,
  iconsize:           [19, 21],
  shadowsize:         false,
  iconanchor:         [4, 19],
  infowindowanchor:   [8, 2]
}
});
</script>
<style type="text/css" media="screen">
 #map1{ float:left; width:500px; height:500px; overflow:hidden; margin: 20px; }
.gmap_marker { font-family:Geneva, Arial, Helvetica, sans-serif; color:#0000CC; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
 <div id="map1"></div>
</body>
</html>

Now my problem: I added a "onmoveend" function, that will get new "marker" data from an external file. All works gresat, just the markers are not displaying right, only the LAST Item will be displayed. I'd bet it's only a small thing, but I am lost right now ....

Here's what I do:

2) I added this Script:

if (GBrowserIsCompatible()) 
{
var map = $gmap;
var center = new GLatLng(<?=$_GET['lat']?>,<?=$_GET['lon']?>);

GEvent.addListener(map, "moveend", function() 
{
 map.clearOverlays();
 var center = map.getCenter();
 var marker = new GMarker(center, {draggable: true});
 map.addOverlay(marker);
 var lat = center.lat();
 var lng = center.lng();
 document.getElementById("lat").value = lat;
 document.getElementById("lng").value = lng;

 GEvent.addListener(marker, "dragend", function() 
 {
  var point=marker.getPoint();
  map.panTo(point);
  var lat = point.lat();
  var lng = point.lng();
  document.getElementById("lat").value = lat;
  document.getElementById("lng").value = lng;
 });


$.getJSON('loader.php', { lat: lat, lng: lng, rad: <?=$rad?>} , function(data) {
$("#map").gMap(
{
 latitude:               lat,
 longitude:              lng,
 zoom:                   9,
 markers:                [data],
 controls:               ["GSmallZoomControl3D", "GMapTypeControl"], //"GScaleControl",
 scrollwheel:            true,
 maptype:                G_HYBRID_MAP,
 html_prepend:           '<div class="gmap_marker">',
 html_append:            '</div>',
 icon:
 {
   image:              "images/gmap_pin.png",
   shadow:             false,
   iconsize:           [19, 21],
   shadowsize:         false,
   iconanchor:         [4, 19],
   infowindowanchor:   [8, 2]
 }
});
});
});

and some html:

<div id="map" style="float:left; width:500px; height:500px; overflow:hidden; margin: 20px;"></div>
Current coordinates: <br>
<b>Latitude:</b> <input type="text" size="34" name="latitude" value="" id="lat" /><br>
<b>Longitude:</b><input type="text" size="34" name="longitude" value="" id="lng" />

If you move the the first map, I display a second map which "should" hold the new markers returned by the loader.php.

loader.php: It's getting the new "close to me" entries from the database and than "builds" the string similar to the one used in sample 1)

Here's how it looks like:

  $MyNewPositionMarker.='{latitude: '. $_GET['lat'].', longitude: '. $_GET['lng'].', html: "'.$html.'"},' ;
//getting database results while 
while($row = mysql_fetch_assoc($result))
{
  $markers.='{latitude: '.$row['odin_facility_lat'].', longitude: '.$row['odin_facility_lon'].', html: "'.$html.'"},' ; 
}

echo $markers.$MyNewPositionMarker

The values that are returned by loader.php "look" exactly what they sdhould look like as per Sample 1).

I guess, my problem is to do with

$.getJSON and some kind of "encode/decode" problem, but I sopent all night, tried back and forth ("normal $.get"), different return formats in loader.php, but all NOT succeeding.

Right now it looks ok, but unfortunately I jet get the LAST marker set on my map. The JQuery Plugin, that is "setting" the markers can be found here: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

Thanks for your help ...

ansaurus

tags:

views:

answers:

Jquery, JSON, PHP and GMaps

related questions