Google Maps in AngularJS

Google Maps in AngularJS

Hello everyone, today's I am going to share the code-sample for display Google map in Angular applications.

Here we need to add the reference file of Google maps which are given below code in detail. The all code steps as given below.

/* For live demo link go here */ http://embed.plnkr.co/ltcINv/preview

/*
   #AngularJs code go here.
  #This is cities collection.
  #Create angular controller
*/

//Cities collection
 var cities = [{
        city: 'India',
        desc: 'The Indian economy is the world seventh-largest by nominal GDP and third-largest by purchasing power parity (PPP).',
        lat: 23.200000,
        long: 79.225487
    }, {
        city: 'New Delhi',
        desc: 'Delhi, officially the National Capital Territory of Delhi, is the Capital territory of India. It has a population of about 11 million and a metropolitan population of about 16.3 million',
        lat: 28.500000,
        long: 77.250000
    }, {
        city: 'Mumbai',
        desc: 'Mumbai, formerly called Bombay, is a sprawling, densely populated city on India’s west coast',
        lat: 19.000000,
        long: 72.90000
    }, {
        city: 'Kolkata',
        desc: 'Kolkata is the capital of the Indian state of West Bengal. It is also the commercial capital of East India, located on the east bank of the Hooghly River',
        lat: 22.500000,
        long: 88.400000
    }, {
        city: 'Chennai   ',
        desc: 'Chennai holds the colonial past and is an important city of South India. It was previously known as Madras',
        lat: 13.000000,
        long: 80.250000
    }, {
        city: 'Gorakhpur',
        desc: 'Gorakhpur also known as Gorakhshpur is a city along the banks of Rapti river in the eastern part of the state of Uttar Pradesh in India, near the Nepal border 273 east of the state capital Lucknow',
        lat: 26.7588,
        long: 83.3697
    }];

    //Create angular controller.
    var app = angular.module('googleAapApp', []);
    app.controller('googleAapCtrl', function ($scope) {
        $scope.highlighters = [];
        $scope.gMap = null;

        var winInfo = new google.maps.InfoWindow();

        var googleMapOption = {
            zoom: 4,
            center: new google.maps.LatLng(25, 80),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        $scope.gMap = new google.maps.Map(document.getElementById('googleMap'), googleMapOption);

        var createHighlighter = function (citi) {
            var citiesInfo = new google.maps.Marker({
                map: $scope.gMap,
                position: new google.maps.LatLng(citi.lat, citi.long),
                title: citi.city
            });
            citiesInfo.content = '<div>' + citi.desc + '</div>';
            google.maps.event.addListener(citiesInfo, 'click', function () {
                winInfo.setContent('<h1>' + citiesInfo.title + '</h1>' + citiesInfo.content);
                winInfo.open($scope.gMap, citiesInfo);
            });
            $scope.highlighters.push(citiesInfo);
        };

        for (i = 0; i < cities.length; i++) {
            createHighlighter(cities[i]);
        }
    });



    /* Styles go here */
    #googleMap {
        height: 500px;
        width: 500px;
        box-shadow: 3px 3px 10px gray;
    }

/* Full Live demo code (AngularJs +HTML+CSS) go here */

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps in AngularJS</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body ng-app="googleAapApp">
    <div ng-controller="googleAapCtrl">
        <h1>Google Maps with AngularJS</h1>
        <div id="googleMap"></div>
    </div>
</body>
</html>

/* For output go here */  http://embed.plnkr.co/ltcINv/preview


Thank you!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.