0

I'm trying to do some reverse geocoding, and I made a quick snippet to test out my code to see if it works.

This is the following code:

<html>
<style>
/**
* Default attributes for gadget body.
*/
body {
 font-family: Arial;
background: none transparent;
padding: 0px;
}
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<body>
<div id="map_canvas"></div> 
<script>
var APIKey = "MyKeyValueIsInHere";   
var geocoder;
var map;
var marker;
var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';
var lat = 55.653363;
var lng = 12.547604;

function initialize() {
    var latlng = new google.maps.LatLng(lat,lng);
    // set the options for zoom level and map type
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // create a map in the map_canvas div element
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    map.setCenter(latlng);
            var marker = new google.maps.Marker({
                map: map, 
                position: latlng

            });
            alert(locationTest);
            var text = JSON.parse(locationTest);
            var infoWindow = new google.maps.InfoWindow();

            var houseNumber = text.address.house_number;
            var road = text.address.road;
            var suburb = text.address.suburb;
            var zipCode = text.address.postcode;
            var city = text.address.city;

            var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;


            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(address);
            infoWindow.open(map, this);
            });
}
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=" + APIKey + "&sensor=false&callback=initialize";  

    document.body.appendChild(script);
}   

loadScript();   
</script>
</body>
</html>

Anyhow, as i run it, i get an alert popping saying : http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1

Bascially, what I want to do is pop an infowindow on top of my marker on my google maps. And the infowindow should have the text that is the variable address.

But as i run this code, i get an

Uncaught SyntaxError: Unexpected token h

on line 45 which is this line:

var text = JSON.parse(locationTest);

So does anyone have an idea about how i fix this problem?

Thanks in advance!

Mikkel Larsen
  • 636
  • 10
  • 24

1 Answers1

0

You have

var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';

and then

var text = JSON.parse(locationTest);

but JSON.parse expects its parameter to be a JSON-encoded string: documentation. You need first to get the contents of the webpage as a string, and then parse it as JSON. The error message is complaining about the "h" at the front of the "http". It expects the first character to be "{".

After your alert statement, you could try:

var $e = $('<div></div>'); // a jQuery object that does not affect your displayed page
$e.load('http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1', function (response) {
    // This code only runs once the response is available from openstreetmap.org
    var text = JSON.parse(response);
    var infoWindow = new google.maps.InfoWindow();
    var houseNumber = text.address.house_number;
    var road = text.address.road;
    var suburb = text.address.suburb;
    var zipCode = text.address.postcode;
    var city = text.address.city;
    var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(address);
        infoWindow.open(map, this);
    });
});
emrys57
  • 6,349
  • 2
  • 37
  • 44
  • I'm slightly unexperienced as a programmer, so not enterily sure where to head from this. By this you mean i need to put {} in the locationTest or what exactly? (Sorry for the stupid question). – Mikkel Larsen Nov 17 '14 at 09:39
  • The URl starting with http:// is the address of a webpage. You need to fetch the contents of that webpage over the net, then parse the contents. That is easiest using jQuery. Here: http://jsfiddle.net/emrys57/p0zLsgs0/ – emrys57 Nov 17 '14 at 10:21
  • Fetching the page contents takes time. The jQuery load(a,b) function executes b(r) when the page a has loaded into variable r. – emrys57 Nov 17 '14 at 10:23
  • If you look at the jsfiddle page and turn on your browser console, chrome - view - developer - javascript console, you will see the 3 console debug messages. – emrys57 Nov 17 '14 at 10:25
  • Thanks for the tick! Good luck! – emrys57 Nov 17 '14 at 10:27
  • Sorry to bother you again, but I just can't figure out how to put this code from the jsfiddle, into my JS file. I can see what you want to do and the basics behind it, but I'm very new to JS & jQuery, So can't get it to fit into my code without errors :) Could you help me out perhaps? – Mikkel Larsen Nov 18 '14 at 08:31
  • You don't have enough rep to chat, which is silly. You need to include the jquery library. Try: in your header. You may need to write var $ = jQuery; to use my code. Then try this: var $e=$('
    '); $e.load(yourURL, function(response) { alert(response); }); but writing any more in the comments is pretty hard!     – emrys57 Nov 18 '14 at 09:25
  • Yeah it would be easier to chat! But you can just edit your own answer can you not? Anyhow, Sorry for taking so much of your time, I'm having a hard time with this JS / jQuery stuff as i just recently started looking at it. – Mikkel Larsen Nov 18 '14 at 09:42
  • The code you now made work, you are brilliant! Thank you so much for your help! – Mikkel Larsen Nov 18 '14 at 10:33