Put markers in Google maps using Angular Maps

Question

var app = angular.module('myapp', ['ngMap']);
app.controller('PolygonArraysCtrl', function (NgMap) {
    var myCenter;
    var vm = this;
    var latlong = [];
    var infoWindow = new google.maps.InfoWindow();


    NgMap.getMap().then(function (map) {
        vm.map = map;
    });




    vm.showArrays = function (event) {

        vm.method1 = function () { alert("shaishav") };

        latlong = new Array;
        $("#label_CoOrdinates").html("");
        // Since this polygon has only one path, we can call getPath()
        // to return the MVCArray of LatLngs.
        var vertices = this.getPath();

        var contentString = '<b>Bermuda Triangle polygon</b><br>' +
            'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
            '<br>';

        // Iterate over the vertices.
        for (var i = 0; i < vertices.getLength() ; i++) {
            var xy = vertices.getAt(i);
            contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
                xy.lng();
            latlong.push(xy.lat() + "_" + xy.lng());
        }
        $("#label_CoOrdinates").text(latlong);

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/Home/Index",
            data: { position: $("#label_CoOrdinates").text() },
            success: function (Data) {
                var mydata = Data;
                

                $.each(mydata.data, function (index, element) {


                    /*Add Marker to th map*/
                    myCenter = new google.maps.LatLng(mydata.data[index].Latitude, mydata.data[index].Longitude);
                    vm.postition = myCenter;
                    alert(vm.postition);
                    /*Push marker element into markers array*/
                    vm.positions = myCenter;
                 

                    var marker = new google.maps.Marker({
                        position: myCenter,
                        map: map,
                        title: 'Hello World!'
                    });

                });


            },
            error: function () {
                alert('Error - ');
            }
        });


        // Replace the info window's content and position.
        //infoWindow.setContent(contentString);
        //infoWindow.setPosition(event.latLng);

        infoWindow.open(vm.map);
    }
});

@{
    Layout = null;
}
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <script src="~/Scripts/app.js"></script>
</head>
<body>
    <div ng-controller="PolygonArraysCtrl as vm">
        <label id="label_CoOrdinates" style="display:none"></label>
        <ng-map zoom="12" center="38.681659, -121.351705" map-type-id="TERRAIN">
        <shape name="polygon" on-click="vm.showArrays()" paths="[ [38.681659, -121.351705], [38.535092, -121.481367], [38.621188 , -121.270555]]"
                   stroke-color="#FF0000"
                   stroke-opacity="0.8"
                   stroke-weight="2"
                   fill-color="#FF0000"
                   fill-opacity="0.35"
                   editable="true"
                   draggable="true">
               
            </shape>
            <marker ng-repeat="p in vm.positions" position="{{p}} "></marker>
        </ng-map>
        
           
        
        <input type="submit" ng-click=" vm.showArrays.method1()" value="Submit" />
    </div>
</body>
</html>

Here is my app.js in that i am getting lat and long for markers but i dont know how to put them on the maps.And it's in for each loop so i need all markers that comes..also when i drag my polygon and click into it previous markers will remove and new markers appear.

beaver · Accepted Answer · 2016-01-19 08:32:08Z

1

In AngularJS you don't need jQuery and $.ajax to do an HTTP request (GET or POST), you can easily use $http service.

Then having received your data from backend service you can assign them to a $scope properties and bind a in a ngRepeat loop.

So in HTML do this:

<ng-map center="{{cx.latitude}}, {{cx.longitude}}" zoom="7">
  <marker ng-repeat="p in places track by $index" position="{{p.lat}}, {{p.lng}}"></marker>
</ng-map>

In JS controller:

app.controller('mapCtrl', function(NgMap, $scope, $http) {

  var url = "places.json";
  $http({
      method: 'GET',
      url: url
    }).then(function(response) {
      // success
      console.log(response);
      $scope.cx = response.data.cx;
      $scope.places = response.data.places;

      NgMap.getMap().then(function(map) {
        var cx = map.getCenter();
        var txt = "center is: lat=" + cx.lat() + ", lng=" + cx.lng();
        console.log(txt);
      });

    }, function(err) {
      // error
    });
});

See this working example: http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR?p=preview

answered Jan 19, 2016 at 8:32

beaver

17.8k2 gold badges43 silver badges70 bronze badges

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

6 Comments

shaishav shukla Over a year ago

Hi beaver, i am able to fetch data from the database and the data is available in mycenter variable. mycenter consists of lat long for the places i need to plot markers on. Now, i am struck on how to plot the markers in ngmap from the variable mycenter.

beaver Over a year ago

In <marker> directive (from ngMap) you have to set position to a string containing the couple latitude/longitude comma separated; so if place is equal to {latitude: xyz, longitude: xyz}, the directive must be written this way <marker ... position="{{place.latitude}}, {{place.longitude}}"></marker>

beaver Over a year ago

In your code you assigned a google.maps.LatLng() object to mycenter... <marker> directive do not need this. But there are also other issues in your code... Try to adapt my example to your needs.

beaver Over a year ago

Check marker docs at rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/… bu also an example with ngRepeat at ngmap.github.io/#/!marker_data_with_ng_repeat.html

shaishav shukla Over a year ago

beaver thank you for your suggestions .Appreciate it..!!

|

Collectives™ on Stack Overflow

Put markers in Google maps using Angular Maps

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related