angular js: Unable to add marker in google map

Question

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

version 2 · Accepted Answer · 2016-06-29 08:46:41Z

1

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

answered Jun 29, 2016 at 8:46

version 2

1,0573 gold badges16 silver badges36 bronze badges

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

Comments

Mikel · Accepted Answer · 2016-06-29 08:50:06Z

1

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);

answered Jun 29, 2016 at 8:50

Mikel

3911 silver badge9 bronze badges

1 Comment

Mikel Over a year ago

Sorry my answer is for more than one marker, even if works just for one

nastyklad · Accepted Answer · 2016-06-29 08:50:51Z

1

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

answered Jun 29, 2016 at 8:50

nastyklad

3291 silver badge8 bronze badges

Collectives™ on Stack Overflow

angular js: Unable to add marker in google map

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related