CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
Manu
Manu

Reputation: 4137

Adding marker on map: AngularJS

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?

Upvotes: 0

Views: 3900

Answers (1)

codeepic
codeepic

Reputation: 4122

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.

Upvotes: 1

Related Questions