CAP alerts on Google Maps

Question

In need of an example of how to show CAP (Common Alerting Protocol) location tags and areas from a feed (or file) on Google Maps. Currently I can show GeoRSS tags on Google Maps with this javascript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.vticker.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

function initialize() {
            var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
            var mapOptions = {
                zoom: 4,
                center: myLatlng
            };
            var map = new google.maps.Map(document.getElementById('publicgeorss'), mapOptions);
            var georssLayer = new google.maps.KmlLayer({
                url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
            });
            georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize1);

And somewhere in the body:

<div id="publicgeorss" style="height:410px; width:400px"></div>

Thanks in advance.

Answer 1

It is straight forward. I dont know how you receive those CAP's, but if the format always is a you describe above you can use the following code :

(Have placed the CAP in a string variable, it would be the same from feed, ajax or file)

document.getElementById('show-cap').onclick = function() {
    //parse CAP
    var parser = new DOMParser(),
        dom = parser.parseFromString(CAP, "text/xml"),
        alert = dom.querySelector('alert');

    //extract some data     
    var info = alert.querySelector('info'),
        event = info.querySelector('event').textContent,
        headline = info.querySelector('headline').textContent,
        instruction = alert.querySelector('instruction').textContent,
        latLngs = alert.querySelector('area').querySelector('polygon').textContent.split(',');

    //create polygon
    //CAP seems to have the polygon [1..length-1] and startpoint at [0,length]
    var i, latLng, 
        start = new google.maps.LatLng(parseFloat(latLngs[0]), parseFloat(latLngs[latLngs.length-1])),
        path = [start];

    for (i=1;i<latLngs.length-1;i++) {
        latLng = latLngs[i].split(' ');
        path.push(new google.maps.LatLng(parseFloat(latLng[1]), parseFloat(latLng[0])));
    }
    new google.maps.Polygon({
        paths: path,
        fillColor: '#FF0000',
        fillOpacity: 0.35,        
        strokeWeight: 0,       
        map: map
    });

    //find and set map center
    var bounds = new google.maps.LatLngBounds();
    for (i=0;i<path.length;i++) {
        bounds.extend(path[i]);
    }
    map.setCenter(bounds.getCenter());    

    //create a marker
    var marker = new google.maps.Marker({
        position: bounds.getCenter(),
        map: map
    });

    //create an infowindow with the headline and instructions
    var info = new google.maps.InfoWindow({
        content: '<h3>'+headline+'</h3>'+'<p>'+instruction+'</p>',
    });
    info.open(map, marker);
};    

The result :

demo -> http://jsfiddle.net/wm5fsgas/