Adding marker on map: AngularJS

Question

I am having a very hard time coping with AngularJS and its way of setting up maps and markers.

Right now I have the following code:

<map data-ng-model="mymapdetail" zoom="11" 
              center="{{item.coordinates}}" style="heigth:375px">
<div data-ng-model="mymarker"></div>
</map>

This correctly shows a centered map. Then I am trying to add a marker this way.

$scope.mymarker = new google.maps.Marker({
            map: $scope.mymapdetail,
            position: new google.maps.LatLng(item.coordinates),
            title: woa.title
        });

This code does not produce any results. Where is it wrong?

Is there a reason why your are not using the angular maps directive? If not then I would provide an answer using that directive. — Bricktop
– Bricktop, Commented Feb 16, 2015 at 22:39

codeepic · Accepted Answer · 2015-02-16 23:02:44Z

1

Here's working solution with marker appearing on click and this one with marker already visible - using your code (well almost - I didn't use map directive), but you should be able to adapt it to your code with very little changes. Probably the main reason why it wasn't working in your case was using new google.maps.LatLng(item.coordinates)

Here's the code:

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
    var item = {
        coordinates: [40.6423926, -97.3981926]
    };

    var woa = {
        city: 'This is my marker. There are many like it but this one is mine.'
    };


    //set up map
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    $scope.mymapdetail = new google.maps.Map(document.getElementById('map'), mapOptions);

    //add marker
    $scope.mymarker = new google.maps.Marker({
        map: $scope.mymapdetail,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(item.coordinates[0], item.coordinates[1]),
        title: woa.city
    });

});

Let me know if it works for you.

answered Feb 16, 2015 at 23:02

codeepic

4,1528 gold badges39 silver badges60 bronze badges

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

1 Comment

codeepic Over a year ago

Sorry, I forgot to mention that 'new google.maps.LatLng(item.coordinates)' wasn't working because item.coordinates was an array and the google.maps.LatLnt was expecting two integers.

Collectives™ on Stack Overflow

Adding marker on map: AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related