Skip to content

Instantly share code, notes, and snippets.

@psychemedia

psychemedia/dallascrimestaticmapJSONP.html

Created September 17, 2010 11:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save psychemedia/584070 to your computer and use it in GitHub Desktop.
Save psychemedia/584070 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dallascrimestaticmapJSONP.html
<html>
<head><title>Static Map Demo - client side</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function dallasdata(json){
var str; var msg;
str= "http://maps.google.com/maps/api/staticmap?center=Dallas,Texas";
str+="&zoom=10&size=512x512&maptype=roadmap";
$.each(json, function(i,item){
addr=item.block+" "+item.location;
label=String.fromCharCode(65+i);
str+="&markers=color:blue|label:"+label+"|"+encodeURIComponent(addr);
str+=encodeURIComponent(",Dallas,Texas");
msg=label+" - ";
msg+=item.date_time+": "+item.nature_of_call;
msg+=", incident #"+item.incident_num;
msg+=", unit "+item.unit_num+" "+item.status;
msg+=" (priority "+item.priority+") - "+item.block+" "+item.location;
$("<li>").html(msg).appendTo("#details");
})
str+="&sensor=false";
$("<img/>").attr("src", str).appendTo("#map");
}
function cross_domain_JSON_call(url){
url="http://ouseful.open.ac.uk/maps/dallas2.php?c=true";
$.getJSON(
url,
function(data) { dallasdata(data); }
)
}
$(document).ready(cross_domain_JSON_call(url));
</script>
</head><body>
<div id="map"></div>
<ul id="details"></ul>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment