Fetching nearby locations from google places and adding markers on google map from results

Question

EDIT: SOLVED. Correct code below the problem code. I'm having trouble getting my code to work. What I want to do is to use geolocation to determine the users location. I then want to do a search to locate something from a string (in this case, "Systembolaget", in a radius of 2000, and show the results on a google map. I get my own location on the map, but i'm having big trouble getting the places results. What am I doing wrong? I don't have that much experience from javascript, so all help is good help. If you're wondering about the cordova script, it's necessary since I'm doing a phonegap application. ```

Accepted Answer

It's hard to give you specific help, because you haven't really described exactly how you are failing. But one thing I notice right away is that you appear to be trying to load the google.maps script twice, with different `sensor` information in each. In your first google.maps script tag you include the literal text MYAPIKEY which is has to be incorrect. If you had a real key in a variable, I would expect something like:

```
src="http://maps.googleapis.com/maps/api/js?key=" + MYAPIKEY + "&sensor=true"
```

And then in your second script tag you appear to load the places library correctly, but then your sensor tag is set as: `sensor-false`. Your 2nd script tag appears more correct to me, so I would suggest removing the first script tag as a start.

From there, can you provide more detail about how your page is failing and maybe a link to the page?

Some additional observations:

- Your initial if-else looks as if it will call the `displayPosition` function, but the code within `displayPosition` will not load the google map; it simply creates some vars that then go out of scope when the function ends.

- Outside of the `displayPosition` function, you create a new instance of the google Map, but it references `myOptions`, which no longer exists at this point in the code, because it only existed within the scope of the `displayPosition` function.

I would suggest changing the code related to Map creation to something like:

```
var map = null;
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}

// Success callback function
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    //Load Google Map
    var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
```

Fetching nearby locations from google places and adding markers on google map from results

Solution

Problem