One step ahead: Using google map with Angular JS.

Today I have tried a small project to implement google map with Angular JS. I have used in this project 3 files. 1. google-map.html 2. map.js 3. map.css. google-map.html contains the container to display the map with it's default locations and custom locations. I have provided it with 5 citeis of India with their latitude and longitude, Below given is the code of both 3 modules.

// map.js

var cities = [
              {
                  place : 'India',
                  desc : 'A country of culture and tradition!',
                  lat : 23.200000,
                  long : 79.225487
              },
              {
                  place : 'New Delhi',
                  desc : 'Capital of India...',
                  lat : 28.500000,
                  long : 77.250000
              },
              {
                  place : 'Kolkata',
                  desc : 'City of Joy...',
                  lat : 22.500000,
                  long : 88.400000
              },
              {
                  place : 'Mumbai',
                  desc : 'Commercial city!',
                  lat : 19.000000,
                  long : 72.90000
              },
              {
                  place : 'Bangalore',
                  desc : 'Silicon Valley of India...',
                  lat : 12.9667,
                  long : 77.5667
              }
          ];

          //Angular App Module and Controller
          var mapApp = angular.module('mapApp', []);
          mapApp.controller('MapController', function ($scope) {

              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 = [];

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

              var createMarker = function (info){

                  var marker = new google.maps.Marker({
                      map: $scope.map,
                      position: new google.maps.LatLng(info.lat, info.long),
                      title: info.place
                  });
                  marker.content = '<div class="infoWindowContent">' + info.desc + '<br />' + info.lat + ' E,' + info.long + ' N, </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);

              }

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

              $scope.openInfoWindow = function(e, selectedMarker){
                  e.preventDefault();
                  google.maps.event.trigger(selectedMarker, 'click');
              }

          });



<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<meta charset="ISO-8859-1">
<title>Maps in AngularJS</title>
<link rel="stylesheet" href="map.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="map.js"></script>
</head>
<body>
<div ng-controller="MapController">
    <div id="map"></div>
    <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
         <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
         <label id="names" >{{marker.title}}</label></a>
    </div>
</div>
</body>
</html>

/* map.css */

body {
    font: bold 12px Arial;
     }
a {
    text-decoration: none;
}
#map{
    height:500px;
    width:500px;
/*    box-shadow: 3px 3px 10px gray;*/
    }
#repeat{
     display: inline;
     }
#country_container {
     margin: 8px 2px 2px 0px;
     text-align: center;
     width: 90px;
     padding: 5px;
     color: white;
     background-color: gray;
     font-size: 16px;
     cursor: pointer;
     }
#country_container:hover {
     box-shadow: 0px 0px 10px blue;
     background-color: gray;
     border: 1px solid gray;
     cursor: pointer;
     }
#names {
     cursor: pointer;
       }

One step ahead

Tuesday 26 May 2015

Using google map with Angular JS.

No comments:

Total Pageviews