Showing google map pinpoints dynamically using angularjs - angularjs

Question

I am trying to show pin points on google map by matching the location and retreiving list of longitude, latitude saved in the database when user enters location using AngularJS, HTML and Java. Following is my controller code. Please help me achieve my target
app.controller('mapCtrl', function ( $scope, $http) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(25,80),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
$scope.cities = [];
$scope.lati = [];
$scope.longi = [];
$scope.desc = [];
var infoWindow = new google.maps.InfoWindow();
$http.get('http://localhost:8080/acudraStore/getCity').
success(function( data){
for(i = 0;i <=3;i++){
$scope.cities.push(data.countryList[i].city);
$scope.lati.push(data.countryList[i].latitude);
$scope.longi.push(data.countryList[i].longitude);
$scope.desc.push(data.countryList[i].desc);
}
var createMarker = function (){
console.log($scope.cities[0]);
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng($scope.lati[0], $scope.longi[0]),
title: $scope.cities[0]
});
marker.content = '<div class="infoWindowContent">' + $scope.desc[0] + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers = [];
$scope.markers.push(marker);
$scope.markers = [];
for (i = 0; i < markers.length; i++){
createMarker(markers[i]);
}}
});
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});

Answer 1

The example (similar to the provide in question) demonstrates how to load locations from external resource and display markers with info window:
var app = angular.module('mapApp', []);
app.controller('mapCtrl', function ($scope, $http) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.5349952, 125.8554386),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
$scope.cities = [];
var infoWindow = new google.maps.InfoWindow();
$http.get('https://gist.githubusercontent.com/vgrem/dd818d266445f1a653c1/raw/e768daf280bab0791c2c27ae0f3d5952490bc2a5/cities.json').
success(function (data) {
$scope.cities = data.countryList;
$scope.cities.forEach(function(city) {
createMarker(city);
});
});
var createMarker = function(city) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(city.latitude, city.longitude),
title: city.city
});
marker.content = '<div class="infoWindowContent">' + city.desc + '</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
};
//$scope.openInfoWindow = function (e, selectedMarker) {
// e.preventDefault();
// google.maps.event.trigger(selectedMarker, 'click');
//}
});
#map {
width: 800px;
height: 600px;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<div id="map"></div>
</div>
Plunker