CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3angularjs-scope
Bonnard
Bonnard

Reputation: 389

google maps api autocomplete show map preview of location

I am using google maps api autocomplete to get the city and country of the establishment searched for. For this, I have an input field and a map preview of the searched location. Here is the jsfiddle, but it is not working at the momemnt (https://jsfiddle.net/rxp7hdLk/2/)

The problem is :

when I search for a location, it gets its city and country, but doesn't update the map preview for that location. It is locked on the default preview.

I currently have the following bit:

autocomplete.addListener('place_changed', function(){
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
        marker.setIcon( /** @type {google.maps.Icon} */ ({
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

Upvotes: 0

Views: 610

Answers (2)

Marcel
Marcel

Reputation: 2794

make your variables global at the beginning:

var map;
var marker;
$scope.city = '';
$scope.country = '';

Upvotes: 0

dev8080
dev8080

Reputation: 4020

You're adding two functions/listeners to do the same thing.

Please remove the relevant code in your application that pertains to ng-change on the autocomplete (cityCode, both functions):

ng-change="cityCode()"

Also in your controller:

$scope.cityCode = cityCode;

function cityCode() {

Free up the code inside cityCode() and out inside the controller itself. No need for the cityCode at all.

Here's a working fiddle.

Upvotes: 1

Related Questions