What do we want to achieve,

  • Create a Google Maps AutoComplete dropdown.
  • Save those address details into our database Server (here, I am using SQL Server).
  • Retrieve those map details into the browser, create and place markers on the map.
  • Navigate between markers on mouse click.
Note

Before creating the project, I will show you how to get API key for Google Maps API.

Step 1.0

Create a Google Maps API from Google console application

It will take some time to create the project.

The credentials have been created. Now, create an MVC project.

Step 1.1

Create an MVC project and name it as GoogleMapTutor.

Step 2

Create Place.cs and MapDbContext.cs files into "Models" folder.

Step 3

Add the connection string into Web.config file.

Step 4

Add a Controller into Controllers > PlacesController and paste the code given below.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using GoogleMapTutor.Models;
  7. namespace GoogleMapTutor.Controllers {
  8. public class PlacesController: Controller {}
  9. }

Step 5

Create two files “Add.cshtml” and “Index.cshtml” into Into Views>Places folder (Create Places folder, if it does not exist).

Note

Please make sure that in Layout.cshtml page, jQuery and Bootstrap are referred.

Step 6

Open “Add.cshtml” file

Step 7

Create an app folder into Scripts folder and add add.js file.

  • In JS given above, I have created one Controller for our View, one factory to communicate with our back-end Server, and one directive for Google Maps auto-complete.

  • The directive will simply create the auto-complete dropdown into our HTML page.

Step 8

Run the Application

Step 9

Index.cshtml file,

Step 10

Add “index.js” and “google-map-dir.js” files into Scripts>app and Scripts>app>Directives(create Directives folder, if it does not exist) folders respectively.

Step 11

Paste the code given below into index.js file.

  1. angular.module('GoogleMapApp', ['googleMapDirectiveApp']).controller('GoogleMapAppController', function($scope, GoogleMapAppFactory) {
  2. $scope.init = function() {
  3. GoogleMapAppFactory.GetLocations($scope.groupId).then(function(response) {
  4. $scope.locationList = response.data;
  5. if ($scope.locationList && $scope.locationList.length) {
  6. $scope.GoToThisLocation($scope.locationList[0].Latitude, $scope.locationList[0].Longitude);
  7. }
  8. }, function(error) {
  9. alert("error!!!");
  10. })
  11. }
  12. $scope.selectedLocation = {
  13. lat: 23,
  14. lon: 79
  15. };
  16. $scope.GoToThisLocation = function(lat, lon) {
  17. if ($scope.selectedLocation.lat != lat || $scope.selectedLocation.lon != lon) {
  18. $scope.selectedLocation = {
  19. lat: lat,
  20. lon: lon
  21. };
  22. if (!$scope.$$phase) {
  23. $scope.$apply("selectedLocation");
  24. }
  25. }
  26. }
  27. //$scope.init();
  28. }).factory("GoogleMapAppFactory", function($http) {
  29. var fac = {}
  30. fac.GetLocations = function(locationGroupId) {
  31. return $http.get('/Places/GetLocationsByGroupId?groupid=' + locationGroupId)
  32. }
  33. return fac;
  34. })

$scope.GoToThisLocation() function will be called when we change (select) a particular place from the place list.

Step 12

Add the code given below into google-map-dir.js file.
  1. angular.module("googleMapDirectiveApp", []).directive('googleMapDir', function() {
  2. return {
  3. restrict: "EA",
  4. replace: true,
  5. template: "<div></div>",
  6. scope: {
  7. center: '=',
  8. markers: '=',
  9. width: "@",
  10. height: "@"
  11. },
  12. link: function(scope, element, attribute) {
  13. //debugger
  14. var map;
  15. scope.$watch('center', function() {
  16. //debugger
  17. if (map && scope.center && scope.markers) {
  18. map.setCenter(getLocation(scope.center))
  19. }
  20. })
  21. scope.$watch('markers', function() {
  22. //debugger
  23. if (scope.markers) {
  24. updateControl();
  25. }
  26. })
  28. function updateControl() {
  29. //debugger
  30. var options = {
  31. center: new google.maps.LatLng(23, 79),
  32. zoom: 15,
  33. mapTypeId: "roadmap"
  34. }
  35. if (scope.center.lat && scope.center.lon) {
  36. options.center = getLocation(scope.center)
  37. } else {
  38. return
  39. }
  40. map = new google.maps.Map(element[0], options);
  41. updateMarkers();
  42. }
  44. function updateMarkers() {
  45. //debugger
  46. // create new markers
  47. currentMarkers = [];
  48. var markers = scope.markers;
  49. if (angular.isString(markers)) markers = scope.$eval(scope.markers);
  50. for (var i = 0; i < markers.length; i++) {
  51. var m = markers[i];
  52. var loc = new google.maps.LatLng(m.Latitude, m.Longitude);
  53. var mm = new google.maps.Marker({
  54. position: loc,
  55. map: map,
  56. title: m.FullAddress
  57. });
  58. currentMarkers.push(mm);
  59. }
  60. }
  62. function getLocation(location) {
  63. if (location == null) {
  64. return new google.maps.LatLng(23, 79);
  65. }
  66. if (angular.isString(location)) {
  67. location = scope.$eval(location);
  68. }
  69. return new google.maps.LatLng(location.lat, location.lon)
  70. }
  71. }
  72. }
  73. })

Step 13

Run the Application.

Great. You have created Google Maps auto-complete with multiple pointers with navigation.