prashant-shahi · November 30, 2017 17:39
diff --git a/index.html b/index.html
 <!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><a href="#" target="_blank">Go more...</a></div>
    <br/>
    <div id="googleMap"></div>
  </div>
 </body>

 </html>
diff --git a/script.js b/script.js
 //This is cities collection
 var cities = [{
  city: 'Nepal',
  desc: 'The country of the highest peak of the world "Mt.Everest" and the only country with Triangular Flag.',
  lat: 27.700769,
  long: 85.316667
 }, {
  city: 'Kathmandu',
  desc: 'Kathmandu, capital of Nepal and home to diverse people',
  lat: 28.0400000,
  long: 85.333333
 }, {
  city: 'Pokhara',
  desc: 'Pokhara, touristic district which welcomes people from different parts of the world for the exotic activities',
  lat: 25.233333,
  long: 83.966667
 }, {
  city: 'Lumbini',
  desc: 'Lumbini, it is believed to be the birth place of Gautam Buddha, which welcomes tourists and believers from every corner of the world',
  lat: 27.4833333,
  long: 83.283333
 }];

 //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]);
  }
 });
diff --git a/style.css b/style.css
 /* Styles go here */

 #googleMap{
    height:500px; 
    width:500px; 
    box-shadow: 3px 3px 10px gray;
    }
	<!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><a href="#" target="_blank">Go more...</a></div>
	<br/>
	<div id="googleMap"></div>
	</div>
	</body>

	</html>
	//This is cities collection
	var cities = [{
	city: 'Nepal',
	desc: 'The country of the highest peak of the world "Mt.Everest" and the only country with Triangular Flag.',
	lat: 27.700769,
	long: 85.316667
	}, {
	city: 'Kathmandu',
	desc: 'Kathmandu, capital of Nepal and home to diverse people',
	lat: 28.0400000,
	long: 85.333333
	}, {
	city: 'Pokhara',
	desc: 'Pokhara, touristic district which welcomes people from different parts of the world for the exotic activities',
	lat: 25.233333,
	long: 83.966667
	}, {
	city: 'Lumbini',
	desc: 'Lumbini, it is believed to be the birth place of Gautam Buddha, which welcomes tourists and believers from every corner of the world',
	lat: 27.4833333,
	long: 83.283333
	}];

	//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;
	}