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

angularjsgoogle-mapsjavascript

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.

Best Solution

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.

Related Question