CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsdictionaryangular-google-maps
user1308874
user1308874

Reputation: 61

Google Maps Search: Location search is not centered after resize map?

I am working on angular+google+Map, Here I want to added some marker with location search, I am also adding location info in form, So when I click on addMarker, it opens one form and reduce the size of map by 50%.

On reduced the size of map by 50 percent, when I search any location, It showed marker for that location, but is hide in Map because size of MAP is changed....

<div ng-style="{ 'width' : width + '%' , 'height': height + '%' }" id="IndiaMap">
        <ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="map-canvas" events="map.events">
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'"  events="markerEvents" icon="'icon'" fit="true">                 
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

Controller

$scope.addLandMarkForm=function(){            
    $scope.markers='';               
    document.getElementById('IndiaMap').className='col-md-6';           
    $scope.map.zoom=5;
    $scope.width =  50;
    $scope.height= 50;
};
$scope.closeForm will close the form and map will return into origin form.

 $scope.closeForm=function () {  
        document.getElementById('IndiaMap').className='col-md-12'; 
        $scope.width =  100;
        $scope.height= 100;          
        $scope.map.zoom=5;           
 };

Search Location

var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);       
google.maps.event.addListener(searchBox, 'places_changed', function(){    
    var places = searchBox.getPlaces()
    var marker_search = {   
          id:store_index,
      coords: {
                   latitude: places[0].geometry.location.lat(),
                   longitude: places[0].geometry.location.lng()
              },
    $scope.latitude=marker_search.latitude;
    $scope.longitude=marker_search.longitude;      
    $scope.map.center = 
              {
                   latitude: marker_search.latitude, 
                   longitude: marker_search.longitude
              };
    $scope.map.zoom=17;
    $scope.$apply();
  }

Upvotes: 0

Views: 92

Answers (1)

Simon H
Simon H

Reputation: 21017

You need to tell Google Maps that the map canvas has changed size, otherwise you will have a variety of rendering issues. Just add this to your code to run after the map size changes

google.maps.event.trigger(map, 'resize');

Upvotes: 2

Related Questions