Rashim's Blog

Posts Tagged ‘Google Map


Almost all web based projects, where location/address is included, we might require mapping service to show the exact location or street view on the page. Thanks to Google to give us such amazing service application, yes I am talking about Google Maps which offers street maps and street view perspective and many more. To get the map rendered in the web page using Angular JS is pretty easy and straight forward. I am going to show you how we can do this,

For this is so, I have created a directive so that I could reuse it throughout the application as an html tag. To locate the area, we might put its Latitude and Longitude or we might put just a valid address. The following directive could be used while we have the latitude and longitude for a particular area,


app.directive('areaBasedGoogleMap', function () {
    return {
        restrict: "A",
        template: "<div id='areaMap'></div>",
        scope: {           
            area: "=",
            zoom: "="
        },
        controller: function ($scope) {
            var mapOptions;
            var map;           
            var marker;

            var initialize = function () {                                
                mapOptions = {
                    zoom: $scope.zoom,
                    center: new google.maps.LatLng(40.0000, -98.0000),
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };
                map = new google.maps.Map
(document.getElementById('areaMap'), mapOptions); }; var createMarker = function (area) { var position = new google.maps.LatLng
(area.Latitude, area.Longitude); map.setCenter(position); marker = new google.maps.Marker({ map: map, position: position, title: area.Name }); }; $scope.$watch("area", function (area) { if (area != undefined) { createMarker(area); } }); initialize(); }, }; });

And this directive might be used while we have a valid address,


app.directive('addressBasedGoogleMap', function () {
    return {
        restrict: "A",
        template: "<div id='addressMap'></div>",
        scope: {
            address: "=",
            zoom: "="
        },
        controller: function ($scope) {
            var geocoder;
            var latlng;
            var map;
            var marker;
            var initialize = function () {
                geocoder = new google.maps.Geocoder();
                latlng = new google.maps.LatLng(-34.397, 150.644);
                var mapOptions = {
                    zoom: $scope.zoom,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map
(document.getElementById('addressMap'), mapOptions); }; var markAdressToMap = function () { geocoder.geocode({ 'address': $scope.address },
function (results, status)
{ if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } }); }; $scope.$watch("address", function () { if ($scope.address != undefined) { markAdressToMap(); } }); initialize(); }, }; });

And in html we can use these directives like the way,

<div address-based-google-map address="Adress" zoom="16"></div>
<div area-based-google-map area="Area" zoom="8"></div>

Finally Module and Controller definition,


var app = angular.module("Main_app", []);

app.controller("MainController", ["$scope", 
function MainController($scope) 
{    
    $scope.Adress = "American University,4400 Massachusetts Ave NW,Washington, DC 20016";
    $scope.Area = { 
                    Name: "Melbourne", 
                    Latitude: -37.8140000, 
                    Longitude: 144.9633200 
                  };
}]);

One more thing, you need to include following JS file to your html page,


angular.js
https://maps.googleapis.com/maps/api/js?sensor=false 

And the style,


 #areaMap, #addressMap
  {
    height: 400px;
    width: 400px;
    margin: 10px;
    padding: 10px;
  }

Very easy stuff but effective enough!!! Download Source Code


%d bloggers like this: