Google map marker from JSON data - “Failed to load resource”

Question

I am trying to load JSON data from the police.uk API ( http://data.police.uk/docs/method/crime-street/ ) and plot the markers on the google map. However, the console says that it fails to load the resource. Can anyone spot where my mistake? I enclose my code for your review. Thanks.

<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="jquery-1.10.2.min.js"></script>
<script>
  var map;
  var latlng;
//Getting the data from the API (http://data.police.uk/docs/method/crime-street/)
function getJSONpoliceuk(callback){
$.getJSON('http://data.police.uk/api/crimes-street/all-crime? lat=51.5600&lng=1.7800&date=2013-01', callback)
}

//Initializing the map
function initialize() {
var coords = [51.5600, 1.7800]
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(51.5600, 1.7800);
var mapOptions = {
  zoom: 5,
  center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map:map,
    title: 'home'
})

getJSONpoliceuk(function(data){
    var crimes = data.crimess;
    var crime, latLng
    for(i in crimes) {
        crime = crimes[i];
        latLng = new google.maps.LatLng(crime.latitude, crime.longitude);
        var marker = new google.maps.Marker({
            position:latlng,
            map:map,
            title: crime.name
        })
    }
})
 }
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>

Answer 1

Using this JSON call

//Getting the data from the API (http://data.police.uk/docs/method/crime-street/)
function getJSONpoliceuk(callback){
$.getJSON('http://data.police.uk/api/crimes-street/all-crime?poly=52.268,0.543:52.794,0.238:52.130,0.478&date=2013-01', callback)
}

and following callback function

getJSONpoliceuk(function(data) {
    var crime, latLng;

    for(i in data) {
        crime = data[i];
        latLng = new google.maps.LatLng(parseFloat(crime.location.latitude), 
                                        parseFloat(crime.location.longitude));
        var marker = new google.maps.Marker({
            position: latLng,
            map:      map,
            title:    crime.category
        });
    }
});

I got markers on the map.

What is bothering me is I got the result running the html file on wamp server and as plain client.

Example at jsBin

Google map marker from JSON data - “Failed to load resource”

Question

1 answers

solution1
1 ACCPTED 2014-01-16 19:37:14

Google map marker from JSON data - “Failed to load resource”

Question

1 answers

solution1 1 ACCPTED 2014-01-16 19:37:14

solution1
1 ACCPTED 2014-01-16 19:37:14