Use XPath foreach for Google Maps geocoder

Question

I'm using the Google Maps API to make an datavisualisation that shows locations from an rss feed. I've managed to get the map and rss location working, but I'm struggling to get the locations in the map.

This is an excerpt of the feed:

<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
        <title>Alarmeringen.nl feed</title>
        <link>http://alarmeringen.nl</link>
        <description>Alarmeringen.nl: Alle alarmeringen voor: Amsterdam-Amstelland</description>
        <atom:link href="http://alarmeringen.nl/feeds/region/amsterdam-amstelland/brandweer.rss"
            rel="self"/>
        <language>nl-NL</language>
        <lastBuildDate>Wed, 11 Jun 2014 16:46:42 +0200</lastBuildDate>
        <item>
            <title>HV 2 LIFTOPSLUITING (+Inc.net: Reg.Inmeld+) , Talbotstraat 47 AMSTERDAM [ ASZ
                ]</title>
            <link>http://alarmeringen.nl/amsterdam-amstelland/amsterdam/15757258/p2000-assistentie-bij-liftopsluiting-op-talbotstraat-in-amsterdam-brandweer-hulpverlening-ter-plaatse.html</link>
            <description>Assistentie bij liftopsluiting op Talbotstraat in Amsterdam, brandweer
                hulpverlening ter plaatse</description>
            <pubDate>Wed, 11 Jun 2014 16:46:42 +0200</pubDate>
            <guid>d5ae65f5049871959f15130ceb06bf2f</guid>
        </item>

        <!-- .. many more items ... --> 

        <item>
            <title>BR 1 BRAND WONING (+Inc.net: 2+) (KEUKEN) (WOONHUIS) (SLACHTOFFERS: ) ,
                Anfieldroad 228 AMSTERDAM [ OVDN VVD ]</title>
            <link>http://alarmeringen.nl/amsterdam-amstelland/amsterdam/15755472/p2000-woningbrand-op-anfieldroad-in-amsterdam-brandweer-met-spoed-ter-plaatse.html</link>
            <description>Woningbrand op Anfieldroad in Amsterdam, brandweer met spoed ter
                plaatse</description>
            <pubDate>Wed, 11 Jun 2014 13:28:07 +0200</pubDate>
            <guid>ad9a2c0586db794415588e2b4e50375a</guid>
        </item>
    </channel>
</rss>

My PHP code for the locations:

$xml = simplexml_load_file('http://alarmeringen.nl/feeds/region/amsterdam-amstelland/brandweer.rss');

$titles = $xml->xpath('//title');
foreach($titles as $title) {
    if(isset(explode(' [', explode(', ', $title)[1])[0]))
    {
    echo "Found " . explode(' [', explode(', ', $title)[1])[0] . "<br />";
    }
}

But now I need to get the values that come out of the foreach loop into the address variable in JavaScript:

var address = 'Talbotstraat 47 AMSTERDAM';

UPDATE

This is the JavaScript code I use to show an address on the map:

function initialize()
{
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(52.37022, 4.89517);
    var mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeControl:         true,
        mapTypeControlOptions:  {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl:      true,
        mapTypeId:              google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    if (geocoder)
    {
        geocoder.geocode(
            {
                'address': address    // The variable is used here
            },

            function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
                    {
                        map.setCenter(results[0].geometry.location);
                        var infowindow = new google.maps.InfoWindow(
                            {
                                content: '<b>' + address + '</b>',
                                size: new google.maps.Size(150, 50)
                            });

                        var marker = new google.maps.Marker(
                            {
                                position: results[0].geometry.location,
                                map: map,
                                title:address
                            });

                        google.maps.event.addListener(marker, 'click', function()
                        {
                            infowindow.open(map,marker);
                        });

                    }
                    else
                    {
                        alert('No results found');
                    }
                }
                else
                {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            }
        );
    }
}

Answer 1

It seems that you want to generate JavaScript variables that will be used at the client-side. You are selecting many objects. I will assume that you want them all avaliable. One way to do that is to generate the code that will create an array in JavaScript and place each string as an element of the array.

You could also use XPath to extract the strings inside the title contents. I used a different but equivalent approach in the example below:

<?php 
    $document = new DOMDocument(); 
    $xml = $document->load('http://alarmeringen.nl/feeds/region/amsterdam-amstelland/brandweer.rss');
    $xpath = new DOMXpath($document);
    $titles = $xpath->evaluate('//title');

    echo '<script>'."\n";
    echo '    var addresses = new Array(); '."\n";

    $count = 0;
    foreach($titles as $title) {
        $variable = $xpath->evaluate('normalize-space(substring-after(substring-before(text(), " ["), ", "))', $title);
        if ($variable != '') {
            echo '    addresses['.$count++.'] = "'.$variable.'";'."\n";
        }
    }
    echo '</script>'."\n";
?>

This will generate the code below, for your source RSS:

<script>
    var addresses = new Array(); 
    addresses[0] = "Louis Couperusstraat 16 AMSTERDAM";
    addresses[1] = "Transformatorweg 28 AMSTERDAM";
    addresses[2] = "Kolfschotenstraat 4 AMSTERDAM ZUIDOOST";
    addresses[3] = "H.J.E. Wenckebachweg 48 AMSTERDAM Gevangenissen";
    addresses[4] = "Pieter Lastmankade 168 AMSTERDAM";
    addresses[5] = "Fiatstraat 1 AMSTERDAM";
    addresses[6] = "Boterdijk UITHOORN";
    addresses[7] = "Nieuwezijds Voorburgwal 130 AMSTERDAM";
    addresses[8] = "Nieuwezijds Voorburgwal 130 AMSTERDAM";
    addresses[9] = "Fiatstraat 1 AMSTERDAM";
    addresses[10] = "David Blesstraat 12 AMSTERDAM";
</script>

UPDATE I believe this solves your problem. You just have to discover how to use the results. The PHP above generates an array containing all the addresses extracted from the feed, in the server side. You can incorporate it as an embedded <script> block into your generated HTML, or use it to generate a .js file and import it using <script src="addresses.js">. You might also consider generating JSON and load via Ajax (which probably would be the best solution - but let's get this one working first).

Working code

1. This PHP fiddle shows the JavaScript code above being generated in a <pre> block (just for visibility); use a <script> block as above or generate it as a js file (without any <script> tags).
2. This HTML/JavaScript fiddle shows a map using the data from the addresses array (which was generated previously). This is a static example assuming you generated the array as above and either embedded it in your HTML or loaded it via JavaScript (or Ajax). The only thing I did to make it work was assign the first element of the generated array to the address variable:

 var address = addresses[0];

And, as you can see in the result, it places a marker on the map representing that address.

If you need to place multiple markers in the map at the same time, I suggest you take a look at these question/answers: Google Maps JS API v3 - Simple Multiple Marker Example