Markers will not show up from url json data

Question

I have a map that fetches data from an api, called police.uk. It fetches the data by dragging and dropping a dot on the map and it displays the crimes of an area within 1 mile radius. Now I'm trying to take a postcode from the user(geocode) and load the data for that area. Without the geocoding field, I'm not getting any error, but with the geocoding service, it cannot load the url resource. This my code. The problem is in function geocodeCrimeLocation. I'm sorry if it's a bit long. I just want to be clear about what I'm implementing.

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <!-- jQuery CDN -->
<script>
    var geocoder;
    var map;
    var latlng;
    var markers = [];
    var myPositionMarker = null;;
      //Initializing the map
      function initialize() {
        var lat = 52.629729;
        var lng = -1.131592;
        geocoder = new google.maps.Geocoder();
        latlng = new google.maps.LatLng(lat, lng);
        var mapOptions = {
            zoom: 8,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        getCrimeByLocation(lat, lng);
      }

        function fitBoundsMap(){
            //Zoom and center the map to fit the markers  
            //This logic could be conbined with the marker creation.  
            //Just keeping it separate for code clarity.  
            var bounds = new google.maps.LatLngBounds();  
            for (index in markers) {  
                var data = markers[index];
                bounds.extend(data.position);  
            }  
            map.fitBounds(bounds);
        }
        function addMyPositionMarker(lat, lng) {
            if(myPositionMarker != null){
                myPositionMarker.setMap(null); // clearing prev req position
            }

            myPositionMarker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                draggable: true,
                zIndex: 99999,
                icon: 'https://i.sstatic.net/orZ4x.png'
            });

            google.maps.event.addListener(myPositionMarker,'dragend',function(event) {
                getCrimeByLocation(event.latLng.lat(), event.latLng.lng());
            });
        }
        //Calling the JSON data from the website
        function getCrimeByLocation(lat, lng, date){
            if(date == null){
                var d = new Date();
                date = d.getFullYear() + '-' + (d.getMonth()+1);
                //hardcoding as of now as jan 2014 data is not there, remove when req
                date = "2013-01";
            }
            $.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+lat+"&lng="+lng+"&date="+date, function( data ) {
            while(markers.length > 0){
                markers.pop().setMap(null);
            }

            //marking the requested position
            addMyPositionMarker(lat, lng);

            $.each( data, function( key, val ) {
            //var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
                var marker = new google.maps.Marker({
                position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: false,
                title: val.location.street.name
                });
                markers.push(marker); // saving markers for reference, so that we can remove them later;
            });

            if(markers.length > 0){
                fitBoundsMap();
            }
            });
        }

function geocodeCrimeLocation(date){
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
         map.setCenter(results[0].geometry.location);
         var latitude = json.results[0].geometry.location.lat;
         var longitude = json.results[0].geometry.location.lng;

         if(date == null){
            var d = new Date();
            date = d.getFullYear() + '-' + (d.getMonth()+1);
            date = "2013-01";
         }
    $.getJSON( "http://data.police.uk/api/crimes-street/all-crime?   lat="+latitude+"&lng="+longitude+"&date="+date, function(data) {
    while(markers.length > 0){
          markers.pop().setMap(null);
    }

//marking the requested position
addMyPositionMarker(latitude, longitude);

$.each( data, function( key, val ) {
    //var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
        map: map,
        animation: google.maps.Animation.DROP,
        draggable: false,
        title: val.location.street.name
    });
    markers.push(marker); // saving markers for reference, so that we can remove them later;
    });

if(markers.length > 0){
    fitBoundsMap();
}
});

} else {
     alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>

HTML:

<body onload="initialize()">
<!-- <div id="map-canvas" style="width: 320px; height: 480px;"></div> -->
<div id="map-canvas" style="width: 100%; height: 480px;"></div>
<div>
    <input id="address" type="textbox" placeholder = "Enter address, or postcode">
    <input type="button" value="Encode" onclick="geocodeCrimeLocation()">
</div>
</body>

If anyone could suggest something to fix the error, that would be much appreciated. Thanks

Answer 1

You should be getting obvious javascript errors on

     var latitude = json.results[0].geometry.location.lat;
     var longitude = json.results[0].geometry.location.lng;

That should be:

     map.setCenter(results[0].geometry.location);
     var latitude = results[0].geometry.location.lat();
     var longitude = results[0].geometry.location.lng();

results[0].geometry.location is a google.maps.LatLng object

Answer 2

On these lines of code (getting the location from the geocoder):

var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;

Do you need the json. ? I can't see why you would unless I'm being dense as the object results is being passed into the function and you're setting the center off that object which I presume is working?