jQuery, JSON, PHP and gMap

Question

1) I have a site, using jQuery and the gMap Google Maps plugin. 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"></script>
    <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? This 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]
                }
            });
        //Trailing "}" missing here...
    </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 great, 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 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 then "builds" the string similar to the one used in sample 1).

Here's what 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 should look like as per Sample 1).

I guess, my problem is to do with $.getJSON and some kind of "encode/decode" problem, but I spent 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 just 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

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

OK - found the first solution... It was, as suggested only a small thing ... Loader.php: echo "[".$markers.$MyNewPositionMarker."]"; and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ... — Christian K.
– Christian K., Commented Aug 13, 2010 at 9:26
Plz answer your question with that solution and mark it as accepted :) — AlfaTeK
– AlfaTeK, Commented Mar 14, 2011 at 18:42
please answer your own question ... preventing others of the head ache to answer it again — footy
– footy, Commented Jun 1, 2011 at 10:33

Peter Mortensen · Accepted Answer · 2012-04-09 09:00:20Z

2

It is only a small thing in Loader.php:

echo "[".$markers.$MyNewPositionMarker."]"; 
//and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...

(This is just a copy-paste of the solution in the comment to remove the question from the "unanswered" list.)

edited Apr 9, 2012 at 9:00

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 1, 2011 at 6:44

Gérald Croës

3,8892 gold badges20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery, JSON, PHP and gMap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related