ng-admin and google maps

Question

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.

Vikas · Answer 1 · 2016-03-12T10:08:35.173

2

This is what i did.

Include Angular Google maps from here http://angular-ui.github.io/angular-google-maps
Create a directive for geo code. This is what i did https://gist.github.com/vkumarsharma/f019f6116844442c609d

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.

edited Mar 12 '16 at 10:08

answered Mar 12 '16 at 10:02

Vikas

41
7

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` – Hugo S. Mendes Mar 14 '16 at 14:31
I fixed the problem with **angular is not defined** _my bad_. but I can't see the map being generated. – Hugo S. Mendes Mar 14 '16 at 14:47
This is what I put `gstation.creationView() .fields([nga.field('longitude', 'template').template('')]);` – Hugo S. Mendes Mar 14 '16 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 '16 at 06: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. – Hugo S. Mendes Mar 17 '16 at 14:26
Hi.. I changed some stuff but now I am getting the error: **Argument 'fn' is not a function, got Object**. Do you have any idea? – Hugo S. Mendes Mar 17 '16 at 16:51

score 0 · Accepted Answer · answered Mar 17 '16 at 19:11

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

ng-admin and google maps

2 Answers2