title: Put markers in Google maps using Angular Maps
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = '&lt;b&gt;Bermuda Triangle polygon&lt;/b&gt;&lt;br&gt;' +
              'Clicked location: &lt;br&gt;' + event.latLng.lat() + ',' + event.latLng.lng() +
              '&lt;br&gt;';
  
          // Iterate over the vertices.
          for (var i = 0; i &lt; vertices.getLength() ; i++) {
              var xy = vertices.getAt(i);
              contentString += '&lt;br&gt;' + 'Coordinate ' + i + ':&lt;br&gt;' + 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);
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@{
      Layout = null;
  }
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/1.3.15/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-controller="PolygonArraysCtrl as vm"&gt;
          &lt;label id="label_CoOrdinates" style="display:none"&gt;&lt;/label&gt;
          &lt;ng-map zoom="12" center="38.681659, -121.351705" map-type-id="TERRAIN"&gt;
          &lt;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"&gt;
                 
              &lt;/shape&gt;
              &lt;marker ng-repeat="p in vm.positions" position="{{p}} "&gt;&lt;/marker&gt;
          &lt;/ng-map&gt;
          
             
          
          &lt;input type="submit" ng-click=" vm.showArrays.method1()" value="Submit" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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. </p>