CODEWITHSUNDEEP
javascriptgoogle-maps-api-3geolocationgoogle-places-api
Joakim Wimmerstedt
Joakim Wimmerstedt

Reputation: 699

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

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.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="cordova-1.6.0.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=true"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">
// Determine support for Geolocation and get location or give error
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
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Places
var request = {
    location: latlng,
    radius: '2000',
    name: ['Systembolaget']
};

var service = new google.maps.places.PlacesService(map);
service.search( request, callback );

function callback(results, status) 
{
    if (status == google.maps.places.PlacesServiceStatus.OK) 
    {
        for ( var i = 0; i < results.length; i++ ) 
        {
            var place = results[i];
            var loc = place.geometry.location;
            var marker = new google.maps.Marker
            ({
                position: new google.maps.LatLng(loc.Pa,loc.Qa)
            });
            marker.setMap(map);  
        }
    }
}

var marker = new google.maps.Marker({
     position: latlng, 
     map: map, 
     title:"You are here"
 });
}

// Error callback function
function errorFunction(pos) {
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
}
</script>
</head>
<body>
        <div id="map_canvas"></div>
</body>

SOLVED! CORRECT CODE!

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<title name="title"></title>

<link rel="stylesheet" type="text/css" href="style.css">
<script src="cordova-1.6.0.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">

// Determine support for Geolocation and get location or give error
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.HYBRID
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Places
var request = {
    location: latlng,
    radius: '20000',
    name: ['whatever']
};

var service = new google.maps.places.PlacesService(map);
service.search( request, callback );

function callback(results, status) 
{
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            var place = results[i];
            createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
        });
        }

var marker = new google.maps.Marker({
     position: latlng, 
     map: map, 
     title:"You're here"
 });


}

// Error callback function
function errorFunction(pos) {
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
}
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>

Upvotes: 4

Views: 8613

Answers (1)

Sean Mickey
Sean Mickey

Reputation: 7716

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);
}

Upvotes: 2

Related Questions