1

i recently started working with angularjs and i'm making an app with google maps. I've made a module where i call to a map and i call to an autocomplete function. The autocomplete works but the map is not showing

this is my code for module

    module.directive('googleplace', function() {
    return {
        require: 'ngModel',
        replace: true,
        link: function(scope, element, attrs, model) {
            var options = {
                types: []
            };
            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(51.228388, 4.405518),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    console.log(element.val());
                    console.log(element);
                    model.$setViewValue(element.val());                
                });
            });
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
            console.log(map);
        }
    };
});

Bonus: Also i want to put overlays on my map using data from my scope, how can i give the object the modelvalue and then put it in google maps?

Kara
  • 6,115
  • 16
  • 50
  • 57
Wannes
  • 355
  • 4
  • 15

2 Answers2

1

First thing I would recommend is to create a fiddle so that we can see what kind of model is being passed, what the controller looks like and what exactly is happening here.

I was trying to do something similar recently and the problem in my case was that the directive fired before the model could be loaded. This meant that Google Maps was being passed no values preventing it from rendering a map.

One way to get around it is by "watching" the ngmodel, see more information here: Angularjs passing object to directive

The other way is to call the "map" function from your controller.

Of course you could use a pre-built directive too: http://nlaplante.github.com/angular-google-maps/#!/usage

EDIT: for overlays you could transclude and pass models to the directive scope with all the required overlay data. Then again "watch" these models to make sure that they are loaded and once they are just run the "map" function and render out a map.

Community
  • 1
  • 1
winkerVSbecks
  • 1,173
  • 1
  • 10
  • 24
-1

Try this it maybe help you.

First install Bower

-> bower install vs-google-autocomplete

  1. Add the Google Places library script to your index.html

Add vs-google-autocomplete.js to your index.html.

Narendra Solanki
  • 1,042
  • 14
  • 20