current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

I'm using the Places library and the angular google places autocomplete module. The autocomplete functionality works perfectly, results are being displayed and selected upon click.

What I am trying to do now is to generate a map from the address once the user selects one of the results of the autocomplete.

I have the following function in my controller:

$scope.$on('g-places-autocomplete:select', function(event, place) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { "address": place.name }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
            location = results[0].geometry.location,
                lat      = location.lat(),
                lng      = location.lng();

            var latlng = new google.maps.LatLng(lat,lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    });
});

It doesn't work, and I'm pretty sure that it is because it can't access the map_canvas element from the frontend (which in itself is inside a template view).

<div id="map_canvas" style="height:300px;"></div>

How could I link the two (or pass the lat and lng variables to the frontend) to make the map appear when the user selects a result?

EDIT

I made a Plunkr that illustrates the error. You'll see that once you select a location, it makes a redirect, in my case to http://localhost:9000/(1.650801,%2010.267894999999953), being the last part the latitude and longitude.

share|improve this question
    
any chance you can add a plunkr? I'd be happy to take a look if I can edit some code... – panzhuli Jul 8 at 18:36
    
@panzhuli check the edit! – Eric Mitjans Jul 8 at 18:55
up vote 1 down vote

Ok - I adjusted a few things, mostly stylistic for my clarity. I think you had some issues with variable declaration. This now loads a map object. I'll let you futz around with making it show data :-)

(function(){

  var app = angular.module('wopWop', ['google.places']);

  app.controller('MainController', function($scope){
        $scope.$on('g-places-autocomplete:select', function(event, place) {
          var loc, lat, lng, latlng, map, options,
              geocoder = new google.maps.Geocoder();

          geocoder.geocode( { "address": place.name }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                    loc = results[0].geometry.location,
                    lat = loc.lat(),
                    lng = loc.lng();
                  }
            });
            latlng = new google.maps.LatLng(lat,lng);
            options = {
               zoom: 1,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), options);
        });
  });
})();

Plunkr

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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