0

I am working on a project that uses ng-admin as framework and I am totally new with angular, etc.

The thing is that I need to use google maps with that, because I have one Entity with Latitude and Longitude.

But I have no idea about how I'm gonna do that. here's what I have done:

gstation.creationView()
.fields([
     nga.field('latitude')
        .validation({ required: true }),
     nga.field('longitude')
        .validation({ required: true }),
     nga.field('fk_company', 'reference')
         .isDetailLink(false)
         .label('Company')
         .targetEntity(companies)
         .targetField(nga.field('name'))
]);

I don't know if there's an easy way to do that or if I need to do that my way.

I can always start something to make that work, but I don't want to create something my way, instead of follow a pattern (if exists).

Any ideas?

Thank you.

2 Answers 2

2

This is what i did.

  1. Include Angular Google maps from here http://angular-ui.github.io/angular-google-maps
  2. Create a directive for geo code. This is what i did https://gist.github.com/vkumarsharma/f019f6116844442c609d
  3. Include the directive as field in you config.js

    nga.field('user_location', 'template')
    .validation({required: true })
    .label('Map Location')
    .template('<geocode geocode="value"></geocode>'),
    

You should see the map in you edit or create view where you should be able to set the marker.

6
  • Hi @Vikas.. Thanks for you answer. I downloaded both files and added to my project (under assets/js folder), but I received this in my console.log Uncaught ReferenceError: angular is not defined Mar 14, 2016 at 14:31
  • I fixed the problem with angular is not defined my bad. but I can't see the map being generated. Mar 14, 2016 at 14:47
  • This is what I put gstation.creationView() .fields([nga.field('longitude', 'template').template('<geocode geocode="value"></geocode>')]); Mar 14, 2016 at 14:49
  • Did you add the directive in your main.js? => myApp.directive('geocode', require('./types/geocode')); Where /types/ was my directory.
    – Vikas
    Mar 16, 2016 at 6:04
  • it says Cannot find module geocode. that's how I put that myApp.directive('geocode', require('geocode')); my script is at the same folder level. Mar 17, 2016 at 14:26
0

Just to complement the answer of @Vikas..

I could make that work by changing to this:

myApp.directive('geocode', ['$location', function ($location) {
return {
    restrict: 'E',
    scope: {
        geocode: '=bind',
    },
    link: function($scope, uiGmapIsReady) {
        var iLat, iLong;
        if ($scope.geocode && $scope.geocode.latitude !== undefined)    {
            iLat  = parseFloat($scope.geocode.latitude);
            iLong = parseFloat($scope.geocode.longitude);
        } else {
            iLat  = 19.090555;
            iLong = 72.888684;
            $scope.geocode = new Object;
            $scope.geocode.__type = "GeoPoint";
            $scope.geocode.latitude = iLat;
            $scope.geocode.longitude = iLong;
        }

        var maps = { center: { latitude: iLat, longitude: iLong }, zoom: 12 };

        $scope.map = maps;
        $scope.options = {scrollwheel: false};

        $scope.marker = {
            id: 0,
            coords: {
                latitude: iLat,
                longitude: iLong
            },
            options: { draggable: true },

            events: {
                dragend: function (marker, eventName, args) {
                    $scope.geocode.latitude  = marker.getPosition().lat();
                    $scope.geocode.longitude = marker.getPosition().lng();
                    var latlng = {lat: parseFloat($scope.geocode.latitude), lng: parseFloat($scope.geocode.longitude)};


                    $scope.marker.options = {
                        draggable: true,
                        labelContent: $scope.address,
                        labelAnchor: "100 0",
                        labelClass: "marker-labels"
                    };

                }
            }
        };

    },
    template: 
    `
    <div class="row list-view">
        <div class="col-lg-12">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" pan=true  refresh="true">
                <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </div>
    `
};}]);
myApp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
    key: '',
    v: '3',
    libraries: 'visualization'
});});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.