Using Google Maps v3, PHP and Json to plot markers
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,
开发者_StackOverflow社区 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
};
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
});
};
精彩评论