In this article I will explain with an example, how to display Google Maps with Markers using AngularJS and Google Maps API V3.
This article will explain how to populate Google Maps with Markers using a JSON array using AngularJS.
The JSON Array will contain details of some locations such as Name, Description, Latitude and Longitude. Using these details Markers will be plotted on the Google Maps using AngularJS.
 
 

Populate Google Maps with Markers from Array using AngularJS

The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of another HTML DIV which will be used to display the Google Maps.
An array of JSON objects consisting of details of some locations such as Name, Description, Latitude and Longitude is created and assigned to the Markers JSON array.
The Google Map options are set and the Map, InfoWindow and LatLngBounds objects are initialized.
Then, a loop is executed over the JSON array and one by one each location present in the Array is plotted as Marker on the Google Map.
Finally, the Google Map is adjusted for best fit.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.Markers = [
        {
             "title": 'Aksa Beach',
            "lat": '19.1759668',
            "lng": '72.79504659999998',
             "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
        },
        {
             "title": 'Juhu Beach',
            "lat": '19.0883595',
            "lng": '72.82652380000002',
             "description": 'Juhu Beach is one of favorite tourist attractions situated in Mumbai.'
        },
        {
             "title": 'Girgaum Beach',
            "lat":'18.9542149',
            "lng":'72.81203529999993',
             "description":'Girgaum  Beach commonly known as justChaupati is one of the most famous public beaches in Mumbai.'
        },
        {
             "title":'Jijamata Udyan',
            "lat":'18.979006',
            "lng":'72.83388300000001',
             "description":'Jijamata Udyan is situated nearByculla station is famous as Mumbai (Bombay) Zoo.'
        },
        {
             "title": 'Sanjay Gandhi National Park',
            "lat": '19.2147067',
            "lng": '72.91062020000004',
             "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
        }];
 
        //Setting the Map options.
        $scope.MapOptions = {
             center: new google.maps.LatLng($scope.Markers[0].lat, $scope.Markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        //Initializing the InfoWindow, Map and LatLngBounds objects.
        $scope.InfoWindow = new google.maps.InfoWindow();
        $scope.Latlngbounds = new google.maps.LatLngBounds();
        $scope.Map = new google.maps.Map(document.getElementById("dvMap"), $scope.MapOptions);
 
        //Looping through the Array and adding Markers.
        for (var i = 0; i < $scope.Markers.length; i++) {
            var data = $scope.Markers[i];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
 
            //Initializing the Marker object.
            var marker = new google.maps.Marker({
                 position: myLatlng,
                map: $scope.Map,
                 title: data.title
            });
 
            //Adding InfoWindow to the Marker.
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    $scope.InfoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    $scope.InfoWindow.open($scope.Map, marker);
                });
            })(marker, data);
 
            //Plotting the Marker on the Map.
            $scope.Latlngbounds.extend(marker.position);
        }
 
        //Adjusting the Map for best display.
        $scope.Map.setCenter($scope.Latlngbounds.getCenter());
        $scope.Map.fitBounds($scope.Latlngbounds);
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
        <div id="dvMap" style="width: 300px;height: 400px">
        </div>
</div>
 
 

Screenshot

AngularJS Google Maps: Populate Google Maps with Markers from Array using AngularJS
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code