CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3angularjs-google-maps
user1308874
user1308874

Reputation: 61

How to adjust the center of google map according to its size?

I want to show the center of India. The size of the map changes according to requirements. My problem is when the size of the map is reduced, it is not showing the center of India, please see the following code:

<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>

I want to center the map of India at latitude: 21.0000, longitude:78.0000, but it's not working. Please see the following image. scope.addLandMarkForm will reduce the size of map by 50 percent and center the map of India at the above coordinates, I am able to reduce the size but not able to set the above coordinates as the center of India:

$scope.addLandMarkForm=function(){            
    $scope.markers='';               
    document.getElementById('IndiaMap').className='col-md-6';           
    $scope.map.zoom=5;
    $scope.width =  50;
    $scope.height= 50;
    $scope.map.center = {latitude: 21.0000, longitude:78.0000};
};

$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;           
 };

Please see the following images:

Incorrect Map center:
Incorrect Map center

Correct Map Center:
Correct Map Center

As suggested by Bruno César, I need some window DOM even listener, which is able to listen DOM changes. How can I use it here? I am changing the CSS class by document.getElementById('IndiaMap').className='col-md-6'; which type of event is it?

Upvotes: 1

Views: 505

Answers (0)

Related Questions