jeudi 11 février 2016

Integrating Geo Location API with Google Places API

So I am trying to integrate two working scripts into one.

I'd like to view all the gyms within a 10km radius of my current location. I can make it worth with a static location but having issues with the geo location integration. This is what I've come up with, any suggestions would be hugely appreciated. Thanks

>

<div id="map"></div>
    <script>
var map;
var infowindow;
var pos;

function initMap() {    

    if (navigator.geolocation) {//GEO LOCATION, FINDS USERS LOCATION
    navigator.geolocation.getCurrentPosition(function(position) {
    pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
     infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }
                                             )};


  var myLocation = pos; //Sets variable to geo location long and lat co-ordinates.

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

  infowindow = new google.maps.InfoWindow({map: map});


  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: myLocation, //Uses geolocation to find the following
    radius: 10000,
    types: ['gym']
  }, callback);
}

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

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

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

        };


    ////////////////////////////////
    </script>




Aucun commentaire:

Enregistrer un commentaire