Hi all - I’m trying to implement the place services function of the Google Maps API, and I’m having a bit of trouble. I was wondering if someone could take a look at my code and see if I’m making a big mistake somewhere.
> html:
> ...
> <ion-content scroll="false">
> <input id="pac-input" class="controls" type="text" placeholder="Search">
> <map on-create="mapCreated(map)"></map>
> </ion-content>
> ...
> controllers.js
> .controller('MapCtrl', function($scope, $ionicLoading) {
> $scope.mapCreated = function(map) {
> $scope.map = map;
> };
> // centers map on user's current location
> $scope.centerOnMe = function () {
> console.log("Centering");
> if (!$scope.map) {
> return;
> }
> $scope.loading = $ionicLoading.show({
> content: 'Getting current location...',
> showBackdrop: false
> });
> navigator.geolocation.getCurrentPosition(function (pos) {
> console.log('Got pos', pos);
> $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
> $scope.loading.hide();
> }, function (error) {
> alert('Unable to get location: ' + error.message);
> });
> };
> })
> directives.js
> angular.module('starter.directives', [])
> .directive('map', function() {
> return {
> restrict: 'E',
> scope: {
> onCreate: '&'
> },
> link: function ($scope, $element, $attr, $compile) {
> function initialize() {
> var myLatlng = new google.maps.LatLng(35.609715,139.74688);
> var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
> var mapOptions = {
> center: pyrmont,
> zoom: 16,
> mapTypeId: google.maps.MapTypeId.ROADMAP
> };
> var map = new google.maps.Map($element[0], mapOptions);
> var request = {
> location: pyrmont,
> radius: 500,
> types: ['store']
> };
> // Create the search box and link it to the UI element.
> var input = /** @type {HTMLInputElement} */(
> document.getElementById('pac-input'));
> map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
> var autocomplete = new google.maps.places.Autocomplete(input);
> autocomplete.bindTo('bounds', map);
> //var searchBox = new google.maps.places.SearchBox(input);
> var request = {
> location: pyrmont,
> radius: 500,
> types: ['store']
> };
> infowindow = new google.maps.InfoWindow();
> var service = new google.maps.places.PlacesService(map);
> service.nearbySearch(request, callback);
> google.maps.event.addListener(marker, 'click', function() {
> infowindow.open(map, marker);
> });
> $scope.onCreate({map: map});
> // Stop the side bar from dragging when mousedown/tapdown on the map
> google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
> e.preventDefault();
> return false;
> });
> }
> 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);
> });
> }
> if (document.readyState === "complete") {
> initialize();
> } else {
> google.maps.event.addDomListener(window, 'load', initialize);
> }
> }
> }
> });
I know it’s a bit much, but any thoughts/help would be greatly appreciated. Thank you all in advance!