Google Map API Geolocation w/Javascript

Question

I'm working on a project that locates coffee shops near the user's location (which is retrieved via the browser). I'm using Google Maps API with the geolocation.

My idea is to locate the users location via geolocation and then retrieve cafes nearby their location. I can't seem to figure out how to add coffee shops or auto search and display coffee shops on the map nearby the user once the location is retrieved by the browser.

Hardcoding the locations in just doesn't seem like the solution but I was hoping to get some advice from more experienced programmers on how I could do this.

At the moment, the code for the map is taken from Google Maps documentation as it provides the functionality I need other than the searching.

I've pasted it below.

     function mapFunc() {
         // referenced from google maps api documentation
         var map;
         var infoWindow;

         function initMap() {
             map = new google.maps.Map(document.getElementById('map'), {
                 center: {
                     lat: -34.397,
                     lng: 150.644
                 },
                 zoom: 15
             });
             infoWindow = new google.maps.InfoWindow;

             //HTML5 geolocation.
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function (position) {
                     var pos = {
                         lat: position.coords.latitude,
                         lng: position.coords.longitude
                     };

                     infoWindow.setPosition(pos);
                     infoWindow.setContent('You are here!');
                     infoWindow.open(map);
                     map.setCenter(pos);
                 }, function () {
                     handleLocationError(true, infoWindow, map.getCenter());
                     search();
                 });
             } else {
                 // Browser doesn't support Geolocation
                 handleLocationError(false, infoWindow, map.getCenter());
             }
         }

         function handleLocationError(browserHasGeolocation, infoWindow, pos) {
             infoWindow.setPosition(pos);
             infoWindow.setContent(browserHasGeolocation ?
                 'Error: The Geolocation service failed.' :
                 'Error: Your browser doesn\'t support geolocation.');
             infoWindow.open(map);
         }

         //get coffee shops nearby??
          }




     mapFunc();

Possible duplicate of [Why can't I combine Google maps getCurrentPosition with place search API](https://stackoverflow.com/questions/36992259/why-cant-i-combine-google-maps-getcurrentposition-with-place-search-api) — geocodezip, Jun 17 '20 at 18:09

score 0 · Answer 1 · answered Jun 17 '20 at 17:37

You need to use the places library in of Google Map api.

Include it in in tag as below

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Then use something like the sample code below:

var map;
var service;
var infowindow;

function initialize() {
  //replace the lat long with results from your geocoding function
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500', //radius in metres
    type: ['coffee shops']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

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

see details in https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Google Map API Geolocation w/Javascript

1 Answers1