CODEWITHSUNDEEP
javascriptgoogle-mapsangularjsangularjs-directive
aanchal jain
aanchal jain

Reputation: 85

Basic AngularJS google maps

I am fairly new to angular and was trying to take a stab at angular google maps.

My requirements. I have a search bar which is for searching for restaurants. The search results api gives me address, latitude and longitude of the restaurant searched by the user. What I want is show a marker mapping the position of the restaurant on the map.

I tried https://github.com/nlaplante/angular-google-maps/. It renders the map but does not center the map to the lat and long I want. Obviously I tried to map the lat and long from the search api

I was wondering if anybody have a usecase similar to mine and have have an example I could follow.

Help is appreciated.

Upvotes: 2

Views: 8688

Answers (1)

orlenko
orlenko

Reputation: 1271

Update: links below seem to be dead. Use this one: http://angular-ui.github.io/angular-google-maps/#!/

It sounds like the example here is what you are asking for: http://nlaplante.github.io/angular-google-maps/#!/demo

Have a look at the source of the DemoController (http://nlaplante.github.io/angular-google-maps/js/demo-controller.js):

module.controller("DemoController", function ($scope, $location) {

        $scope.$watch("activeTab", function (newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }

            if ($location.path() != $scope.activeTab) {
                $location.path($scope.activeTab);
            }
        });

        $scope.getNavClass = function (item) {
            return item == $scope.activeTab ? "active" : "";
        };

        // default location
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.geolocationAvailable = navigator.geolocation ? true : false;

        $scope.latitude = null;
        $scope.longitude = null;

        $scope.zoom = 4;

        $scope.markers = [];

        $scope.markerLat = null;
        $scope.markerLng = null;

        $scope.addMarker = function () {
            $scope.markers.push({
                latitude: parseFloat($scope.markerLat),
                longitude: parseFloat($scope.markerLng)
            });

            $scope.markerLat = null;
            $scope.markerLng = null;
        };

        $scope.findMe = function () {

            if ($scope.geolocationAvailable) {

                navigator.geolocation.getCurrentPosition(function (position) {

                    $scope.center = {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude
                    };

                    $scope.$apply();
                }, function () {

                });
            }   
        };
    });

You can use $scope.center to tell the map where to center itself.

Hope this helps!

Upvotes: 7

Related Questions