An Interactive google map with Turnkey

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

 

 

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');
}

You will also find it as download here https://wiki.mdriven.net/index.php/Small_Samples

This entry was posted in AngularJS, Javascript, MDrivenTurnkey and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*