Question

Currently I have a page displaying 3 Google Maps that are generated by JavaScript, these are based on a geocode that is hard coded into the JavaScript.

I now have set the geocodes within an XML file and using a PHP function to call the geocode from the XML into a array. But I’m unsure on how to go about parsing this from the array into the JavaScript.

Here is my JavaScript.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?   sensor=true&libraries=places"></script>
<script type="text/javascript">

function initMap(mapObj, lat, lng) {
    var latLng = new google.maps.LatLng(lat, lng);
    var mapInstance = new google.maps.Map(mapObj, {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng,
        zoom: 11
    });
    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(mapInstance);

    function createMarker (place) {
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            map: mapInstance,
            position: place.geometry.location
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(mapInstance, this);
        });        
    }

    function searchCallback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    service.search({ location: latLng, radius: 5000 }, searchCallback);
}


function initialize() {
    var ndx = 0;
    function calInitMap(lat, lng) {
        initMap(document.getElementById('map'+ndx), lat, lng);
        ndx++;
    }
    calInitMap(51.5069999695, -0.142489999533);
    calInitMap(40.79445,-74.01558);
    calInitMap(48.858001709, 2.29460000992);
}

google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 <noscript>JavaScript not detected! Verify that JavaScript support is enabled in your browser, or upgrade to a newer JavaScript-capable web browser and try again.</noscript>

<div id="map0" style="position:absolute; width: 290px; height: 300px;"></div>
<div id="map1" style="position:absolute; left:492px; width: 288px; height: 300px;"></div>
<div id="map2" style="position:absolute; left:788px; width: 290px; height: 300px;"></div>

Here is the PHP function I’m using to call in the geocode from the XML file.

 function getGeocode() {

try {
    $xml = new SimpleXmlElement(file_get_contents('config/cityConfig.xml'));
} catch (Exception $e) {
    echo 'Caught exception: An error has occured. Unable to get cityConfig.xml';
}

$geoSource = array();
foreach ($xml->city as $city) {
    $geo = (string) $city->geocode;
    array_push($geoSource, $geo);
}

return $geoSource;
 }
 ?>

I have thought about using calInitMap($geocodeSource[0]);, or would it be better to use a JavaScript function to access the XML file? Any suggestions?

Answer 1

You may store the array as a variable in JS:

var geocodes=<?php echo json_encode(getGeocode());?>

…no need for parsing on JS-side.