Draw map based on selected city in selectbox in angularjs

Question

i have a select box for city which has number of cities getting through ng-options. i need to show the map on the website based on city selected in the selectbox.
this is how i am getting city names

// Code goes here


$scope.data = [{
        cities: [{
            id: 1,
            title: 'Mysore'
        }, {
            id: 2,
            title: 'Bangalore'
        }, {
            id: 3,
            title: 'Delhi'
        }, {
            id: 4,
            title: 'Mumbai'
        }],
        maps: [{
                id: 1,
                title: 'Zoo',
                city_id: 1
            }, {
                id: 2,
                title: 'Palace',
                city_id: 1
            }, {
                id: 3,
                title: 'Beach',
                city_id: 4
            }]

    }];
});

Plunker here https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
Can anyone please help me.

score 1 · Accepted Answer · answered Jan 04 '16 at 15:32

1

Move the coordinates to the $scope:

$scope.coordinates = {
  lat: 28.620089858889145,
  lng: 77.17483520507812
};

And:

<ng-map zoom="13" center="{{coordinates.lat}},{{coordinates.lng}}" ...

Use ng-change on the select:

ng-change="centerCity(citySelect.selectedOption)"

In the centerCity method you can use the geocoder to retrieve the coordinates by city name. Then you simply need to update the variables.

Simple example:

var geocoder = new google.maps.Geocoder();

$scope.centerCity = function(city) {

  geocoder.geocode({
    'address': city.title
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      $scope.$apply(function() {
        $scope.coordinates.lat = results[0].geometry.location.lat();
        $scope.coordinates.lng= results[0].geometry.location.lng();
      });

    } else {
      console.log('Error');
    }
  });
};

Demo: https://plnkr.co/edit/WETs0FL0DbPbDn2A77hq?p=preview

answered Jan 04 '16 at 15:32

tasseKATT

38,470
8
84
65

One more thing, The map select box in the plunker https://plnkr.co/edit/WETs0FL0DbPbDn2A77hq?p=preview will show options based on city now. so if i want the map to be shown based on the map (second) select box. it should search the map.title in the selected city in the first select box. how to do it – Thilak Raj Jan 05 '16 at 05:40
Try something like this: https://plnkr.co/edit/NwxhxSipp60xBxS4DDCN?p=preview I don't know google maps well enough to know if those are valid search parameters however. – tasseKATT Jan 05 '16 at 05:55
that plunker is almost working. but the problem is if i select mysore in city and select anyone in map, it worked but after selecting one item in map. if i choose another one , it is not working – Thilak Raj Jan 05 '16 at 06:13

Draw map based on selected city in selectbox in angularjs

1 Answers1