AngularJS with angular-google-maps: Add Marker through fomr and Find me

Question

I am trying to reproduce the example from http://nlaplante.github.io/angular-google-maps/ because it does 90% of what i want.

But so far i'm not having much success, it can find my location because i can console log it, but it doesn't place a marker on the map.. And the "addMarker" function seems to work but the console log is returnig [Object][Object] and not the value that the input has..

What i want to do is add markers through a lat + lng form and also add a marker when i press the "find me" button.

The code i have so far:

HTML:

<html ng-app="typeApp" class="no-js">

...

<body ng-controller="MainCtrl">

...

      <a class="button" ng-click="findMe()" href="">Find me</a>

      <table class="table">
          <tr>
            <td><input type="number" class="" ng-model="markerLat" name="markerLat" required=""></td>
            <td><input type="number" class="" ng-model="markerLng" name="markerLng" required=""></td>
            <td><button class="button" ng-click="addMarker()">Add</button></td>
          </tr>
      </table>

JS

'use strict';

var module = angular.module('typeApp', ['ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'google-maps',
    'pageslide-directive'
]);

module.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    controller: 'loginCtrl'
  })
  .otherwise({
    redirectTo: '/404.html'
  });
});

module.controller('MainCtrl', function ($scope) {

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

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

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

    $scope.zoom = 6;

    $scope.styles = [
        {
          stylers: [
            { hue: "#00ffe6" },
            { saturation: -20 }
          ]
        },{
          featureType: "road",
          elementType: "geometry",
          stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
          ]
        },{
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        }
    ];

    $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;
        console.log('Maker add: ' + $scope.markers);
    };  

    $scope.findMe = function () {

        if ($scope.geolocationAvailable) {

            navigator.geolocation.getCurrentPosition(function (position) {

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

                $scope.$apply();
                console.log('Found You: ' + position.coords.latitude + ' || ' + position.coords.longitude);
            }, function () {

            });
        }   
    };

});

The console.log('Found You: ' + position.coords.latitude + ' || ' + position.coords.longitude); outputs my coordinates but the map doesn't update. The console.log('Maker add: ' + $scope.markers); outputs [Object][Object] each time i click in the add marker button.

Any help would be very appreciated. Thanks.

pr0tipZ · Accepted Answer · 2014-05-07 19:31:10Z

2

this code is good. You're only missing one variable.

Instead of $scope.center, you have to add $scope.map.center like so:

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

Same for scope.markers. Try scope.map.markers. Haven't tested but it should work.

edited May 7, 2014 at 19:31

answered May 7, 2014 at 16:22

pr0tipZ

1411 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kadajett · Accepted Answer · 2014-04-26 04:45:07Z

0

If you are loading the position on the fly(Through your browser) you should add ng-if="position" When that becomes available, if will flip the ng-if statement and a digest will start.

add the ng-if on the marker element

answered Apr 26, 2014 at 4:45

Kadajett

936 bronze badges

Collectives™ on Stack Overflow

AngularJS with angular-google-maps: Add Marker through fomr and Find me

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related