CAP alerts on Google Maps - 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/