Using Google Maps v3, PHP and Json to plot markers

Question

I am creating a map using the new(ish) v3 of the Google Maps API

I have managed to get a map displaying using code as below:

var myLatlng = new google.maps.LatLng(50.8194000,-0.1363000);

    var myOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeControl: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

However I now want to add a number of markers I have stored in a PHP array.

The Array currently looks like this if I print it out to screen:

Array
(
[0] => Array
    (
        [poiUid] => 20
        [poiName] => Brighton Cineworld
        [poiCode] => brighton-cineworld
        [poiLon] => -0.100450
        [poiLat] => 50.810780
        [poiType] => Cinemas
    )

[1] => Array
    (
        [poiUid] => 21
        [poiName] => Brighton Odeon
        [poiCode] => brighton-odeon
        [poiLon] => -0.144420
        [poiLat] => 50.821860
        [poiType] => Cinemas
    )
)

All the reading I have done so far suggests I turn this into JSON by using json_encode

If I run the Array though this and echo it to the screen I get:

[{"poiUid":"20","poiName":"Brighton Cineworld","poiCode":"brighton-cineworld","poiLon":"-0.100450","poiLat":"50.810780","poiType":"Cinemas"},{"poiUid":"21","poiName":"Brighton Odeon","poiCode":"brighton-odeon","poiLon":"-0.144420","poiLat":"50.821860","poiType":"Cinemas"}]

The bit now is where I am struggling, I am not sure the encoded array is what I need to start populating markers, I think I need something like the code below but not sure how to add the markers from my passed through JSON

var locations = $jsonPoiArray;
  for (var i = 0;i < locations.length; i += 1) {
  // Create a new marker

  };

Little followup here, if I use the following I can see that a correct value is being passed through: var poiJson = <? echo $jsonArray ?>; alert(poiJson[0].poiName); — bateman_ap
– bateman_ap, Commented Apr 12, 2010 at 22:44

bateman_ap · Accepted Answer · 2010-04-12 23:28:33Z

2

Well I think I have solved it, however if it is a stupid way of doing it please leave an answer!

I ended up using

var poiJson = <? echo $jsonArray ?>;

    for (var i = 0;i < poiJson.length; i += 1) {
        var lat = poiJson[i].poiLat;
        var lon = poiJson[i].poiLon;
        addMarker(lat,lon,i);
    };

    function addMarker(lat,lng,no){
    var latlng = new google.maps.LatLng(lat,lng);  
    var marker = new google.maps.Marker({
    position: latlng,
    map: map
    });
    };

answered Apr 12, 2010 at 23:28

bateman_ap

1,9217 gold badges28 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Using Google Maps v3, PHP and Json to plot markers

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