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.
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);
});
});
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.