MDrivenWiki
Log in

Google Map with Turnkey

From MDrivenWiki

Updates with GoogleMap

File:GoogleMap.zip File:SampleModleForAssociations2.zip

Or look for the snippets to copy down below, after the video👇

The video shows:

  • Add a map
  • Show server data as markers on the map
  • Make the markers update when server object updates
  • Detect deletion and remove marker
  • Make it possible to create a marker that in turn create server object to hold it
  • Make the marker take its color from server object
  • Make the marker movable on the map and update server object on release

To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme navigation-itemplace in the video. Now you can pick any topic to be instructed without watching the whole video.


This is the script for you to copy:

var map;
 var dictionaryOfIdsAndMarkers = {};

 function InstallTheDirectiveFor_GoogleMap(streamingAppController) {
  streamingAppController.directive('googlemap', ['$document', function ($document) {
    return {
      link: function (scope, element, attr) {
        // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)
        var stockholm = { lat: 59.325, lng: 18.073 };
          map = new google.maps.Map(element[0], {
            zoom: 4,
            center: stockholm
          });

          google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(event.latLng, scope);
          });
      }
    };
  }]);

  streamingAppController.directive('googlemapmarker', ['$document', function ($document) {
    return {
      link: function (scope, element, attr) {
        // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)
        scope.$watch('row.lat', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });
        scope.$watch('row.lng', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });

        scope.$watch('row.color', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });
        scope.$watch('row.VMClassId.asString', function (newv, oldval, thescope) {
          var marker = dictionaryOfIdsAndMarkers[oldval];
          dictionaryOfIdsAndMarkers[oldval] = null;
          dictionaryOfIdsAndMarkers[newv] = marker;
        });
        scope.$on('$destroy', function (thescope) {
          dictionaryOfIdsAndMarkers[thescope.currentScope.row.VMClassId.asString].setMap(null);
        });

        var newmarker = new google.maps.Marker();
        newmarker.setDraggable(true),
        newmarker.setTitle("Drag me!");
        dictionaryOfIdsAndMarkers[scope.row.VMClassId.asString] = newmarker;

        newmarker.addListener('dragend', function (event) {
          scope.row.lat = event.latLng.lat();
          scope.row.lng = event.latLng.lng();
        });

        UpdatePosition(scope.row);
      }
    };
  }]);

  console.trace("googlemap component Loaded");
 }
 InstallTheDirectiveFor_GoogleMap(angular.module(MDrivenAngularAppModule));

And the helper functions:

function UpdatePosition(row)
 {
  var markertoUpdate = dictionaryOfIdsAndMarkers[row.VMClassId.asString];
  if (row.lat != null && row.lng != null) {
    markertoUpdate.setPosition({ lat: row.lat, lng: row.lng });
    markertoUpdate.setMap(map);    if (row.color != null )
      markertoUpdate.setIcon('http://maps.google.com/mapfiles/ms/icons/' + row.color+'-dot.png');
  }

  else  {
    markertoUpdate.setMap(null);
  }
 }

 function placeMarker(location, scope)

 {
  scope.data.VM_Variables.vLat = location.lat();
  scope.data.VM_Variables.vLng = location.lng();
  scope.data.Execute('AddMarker');
 }