title: Getting data from Police.uk with PHP and display them on Google Map
body: <p>I am implementing a dashboard, that has to get data from police.uk API and display them on Google Maps. 
  The request to the API(link to the API: <a href="http://data.police.uk/docs/" rel="nofollow">http://data.police.uk/docs/</a>) is a URL like <a href="http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&amp;lng=-1.131592&amp;date=2013-01" rel="nofollow">http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&amp;lng=-1.131592&amp;date=2013-01</a>  and the response is JSON data, that are displayed on Google Maps. There is a similar question for that on Stackoverflow, but they use Spring MVC controllers. However, I am interested in how can I get these data and display them on Google Maps with PHP.  Any suggestions on that? I attach my code for the Google Map.</p>
  
  <pre><code>var geocoder;
  var map;
  var latlng;
  function initialize() {
  geocoder = new google.maps.Geocoder();
  latlng = new google.maps.LatLng(53.5500, 2.4333);
  var mapOptions = {
    zoom: 9,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  }
  
  var take;
  function codeLatLong() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      take = map.setCenter(results[0].geometry.location);
      var myCity = new google.maps.Circle({
         center: results[0].geometry.location,
         radius:20000,
         strokeColor:"#0000FF",
         strokeOpacity:0.8,
         strokeWeight:2,
         fillColor:"#0000FF",
         fillOpacity:0.4
      });
  
      myCity.setMap(map);
  
  
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  }
  //Calling the JSON data from the website with an example
  $.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&amp;lng=-1.131592&amp;date=2013-01", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
      items.push( "&lt;li id='" + key + "'&gt;" + val + "&lt;/li&gt;" );
  });
  
  $( "&lt;ul/&gt;", {
      "class": "my-new-list",
      html: items.join( "" )
  }).appendTo( "body" );
  });
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
  &lt;div id="map-canvas" style="width: 320px; height: 480px;"&gt;&lt;/div&gt;
  &lt;div&gt;
  &lt;input id="address" type="textbox" placeholder = "Enter address, or postcode"&gt;
  &lt;input type="button" value="Encode" onclick="codeLatLong()"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>