CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3angularjs-scope
version 2
version 2

Reputation: 1059

angular js: Unable to add marker in google map

I'm trying to add a marker in google map but unfortunately, it's not getting added.

There is only one marker in a map.

Here's my HTML:

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker ng-repeat="marker in markers"
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

My Angular code looks like this:

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.markers.id = "1";
  $scope.markers.coords.latitude = "40.7903";
  $scope.markers.coords.longitude = "-73.9597";
  $scope.markers.window.title = "Manhattan New York, NY";

});

CODEPEN

Upvotes: 1

Views: 423

Answers (3)

nastyklad
nastyklad

Reputation: 329

Your code works just fine. Just added the markers array on which there's a ng-repeat

Here's a working codePen : http://codepen.io/anon/pen/WxpaqE

Upvotes: 1

Mikel
Mikel

Reputation: 391

change the controller to:

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.markers = [];
  $scope.marker = {
    id: 1,
    coords: {
      latitude: "40.7903",
      longitude: "-73.9597",
    },
    window: {
      title: "Manhattan New York, NY",
    }
  };
  $scope.markers.push($scope.marker);
});

Why?

markers is an array in your HTML. In the controller you didn't declare it.

marker instead is an object.

You could create now more markers and push it to the markers to show more than one point in the map with $scope.markers.push($scope.otherMarker);

Upvotes: 1

version 2
version 2

Reputation: 1059

Changed the code a little bit and got the result.

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.marker = { 
    coords: { latitude: 39.8282, longitude: -98.5795 }, 
    id: 4 ,
    window: { title: "Manhattan New York, NY" }
  };


});

AND HTML became:

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker 
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

CODEPEN

Upvotes: 1

Related Questions