Recent Tutorials and Articles
    User-defined Marker to Google Map in AngularJS
    Published on: 2018-05-25 16:05:50
    Posted By: Sumit Sain

    This tutorial helps you implement user-defined (using form) markers to Google Maps using AngularJS.

    We will be creating following three files in order to demonstrate the implementation of Google Maps with user-defined place markers in AngularJs -

    1. googleMaps.html file for creating the map div and a form where user can input longitude, latitude and title for the place, he/she wants to put marker on.
    2. maps.css file for adding basic style to our google map.
    3. maps.js file containing AngularJs controller responsible for initializing the google map, adding marker and centering the map to user defined place.

    This is how our project structure looks like -

    googleMaps.html

    Here is how our HTML file googleMaps.html looks like -

    googleMaps.html
    <!DOCTYPE html>
    <html ng-app="mapsApp">
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/maps.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="js/maps.js"></script>
    </head>
    <body>
      <div ng-controller="MapCtrl">
        <div id="map"></div>
        <table id="form-control">
          <tr>
            <td><label>Enter Latitude</label></td>
            <td><input type="number" ng-model="markerLat"
              required=""></td>
          </tr>
          <tr>
            <td><label>Enter Longitude</label></td>
            <td><input type="number" ng-model="markerLng"
              required="" ng-model="defaultLng"></td>
          </tr>
          <tr>
            <td><label>Enter Title</label></td>
            <td><input type="text" ng-model="infoTitle"
              required=""></td>
          </tr>
          <tr>
            <td><button class="button"
                ng-click="addMarker(markerLat,markerLng,infoTitle)">Add</button></td>
          </tr>
        </table>
      </div>
    </body>
    </html>
    
    

    Let's discuss some of AngularJs specific parts in the above HTML file. Specifically, here are the attributes that need attention -

    1. First we have added Google Maps library in script tag - <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
    2. Now we create a div element named "map" to hold the Map.
    3. The AngularJS application is defined by ng-app="mapsApp".The application runs inside the <html>.
    4. ng-controller="MapCtrl" - attribute is an AngularJS directive. It defines a controller.
    5. Now we create a table for add markers.
    6. In that table, first we will create a Latitude text input and then we will create a longitude text input.
    7. Then we will create a button and add ng-click attribute to call addMarker function .
    maps.css

    Next file to talk about is a css file that we have added to give our links and map a fine look. This is a simple CSS file without any angular or fancy stuff in it.

    maps.css
    body {
      font: bold 12px Arial;
    }
    
    a {
      text-decoration: none;
    }
    
    #form-control {
      box-shadow: 3px 3px 10px gray;
      padding: 5px;
      border: 5px solid black;
      border-radius: 10px;
    }
    
    #map {
      height: 500px;
      width: 500px;
      box-shadow: 3px 3px 10px gray;
      float: left;
      border: 5px solid white;
      border-radius: 10px;
      margin-right: 20px;
    }
    
    #repeat {
      display: inline;
    }
    
    #country_container {
      width: 1000px;
      margin: 13px 3px 3px 0px;
      text-align: center;
      width: 85px;
      padding: 4px;
      display: inline-table;
      color: white;
      background-color: black;
      font-size: 12px;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 13px;
    }
    
    #country_container:hover {
      box-shadow: 0px 0px 10px black;
      background-color: gray;
      border: 1px solid gray;
      cursor: pointer;
    }
    
    #names {
      cursor: pointer;
    }
    
    
    maps.js

    Finally, here is the javascript file containing the controller for our Google Map -

    maps.js
    
    var sampleApp = angular.module('mapsApp', []);
    
    sampleApp.controller('MapCtrl',
      function($scope) {
        $scope.markerLat = 23.200000;
        $scope.markerLng = 79.225487;
        $scope.infoTitle = 'India';
    
        var india = new google.maps.LatLng($scope.markerLat, $scope.markerLng);
    
        var mapOptions = {
          zoom : 4,
          center : india,
          mapTypeId : google.maps.MapTypeId.TERRAIN
        }
    
        $scope.map = new google.maps.Map(document.getElementById('map'),
            mapOptions);
    
        $scope.markers = [];
    
        var infoWindow = new google.maps.InfoWindow();
    
        $scope.addMarker = function(lat, lng, title) {
    
          var latLang = new google.maps.LatLng(lat, lng);
    
          var marker = new google.maps.Marker({
            map : $scope.map,
            position : latLang,
            title : title
          });
          marker.content = '<div class="infoWindowContent">'
              + marker.title + '</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);
    
          $scope.map.setCenter(latLang);
        };
        $scope.openInfoWindow = function(e, selectedMarker) {
          e.preventDefault();
          google.maps.event.trigger(selectedMarker, 'click');
        }
      }
    );
    
    

    In the above javascript file, there are a few things to note:

    1. We create a JavaScript object literal named "mapOptions" to hold a number of map properties.
    2. We create a JavaScript "map" object, passing it the div element and the map properties.
    3. Then we create a addMarker() function to add latitude and longitude.
    4. Then we create a infoWindow() function to show the title when user click on the marker.
    Webpage Output in Browser

    This is how the HTML code above will be displayed in a browser with Google Map and links.

    Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.

    Posted By: Sumit Sain
    Published on: 2018-05-25 16:05:50

    Comment Form is loading comments...