In this tutorial I have explain about Google map using AngularJS
<html ng-app="googlemapsApp">
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<title>Create google map using Angularjs Tutorials</title>
<style>
.map-container {
margin: 40px 260px;
}
#map {
height:420px;
width:600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom:0;
margin-top: 0;
}
.headline {
padding-top: 40px;
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div ng-app="googlemapsApp" ng-controller="MapCtrl" class="map-container">
<div id="map"></div>
<div class="headline"> Click City Name</div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<ul>
<li>
<a href="#" ng-click="openInfoWindow($event, marker)" >
{{marker.title}}
</a>
</li>
</ul>
</div>
</div>
<script>
//Data
var cities = [
{
city : 'Toronto',
desc : 'This is the best city in the world!',
lat : 43.7000,
long : -79.4000
},
{
city : 'New York',
desc : 'This city is aiiiiite!',
lat : 40.6700,
long : -73.9400
},
{
city : 'Chicago',
desc : 'This is the second best city in the world!',
lat : 41.8819,
long : -87.6278
}
];
//Angular App Module and Controller
angular.module('googlemapsApp', [])
.controller('MapCtrl', function ($scope) {
//Zoom option in map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
//Create marker in google map - 2
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.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);
}
//Create marker in google map - 1
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
//Display Address information
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
</script>
</body>
</html>
Comments
Post a Comment