0

Can anyone help?

I cant seem to get google maps to center on the marker. The Map is in pop up that is hidden on load.

If the map is visible on page load everything works fine. but thats not the functionality i'm after.

   $scope.$on('displayDealerMap', function() {

            $scope.displayModal = mySharedService.message;

            dealerLatLng = {
                lat: mySharedService.location.lat,
                lng: mySharedService.location.lng
            };

            var center = new google.maps.LatLng(dealerLatLng);

            var map_options = {
                zoom: 13,
                center: center
            };

            // create map
            var map = new google.maps.Map(document.getElementById('myMap'), map_options);



            var marker = new google.maps.Marker({
                position: dealerLatLng,
                map: map
            });

            $timeout(function(){
                google.maps.event.trigger(map, 'resize');
            },100);


        });
duncan
  • 31,401
  • 13
  • 78
  • 99
user2668392
  • 23
  • 8
  • Your issue has already been addressed in Thomas' answer, but as a bonus, you might also find map.setCenter(new window.google.maps.LatLng(lat, lng)) to be useful for manually recentering at will. The Google Maps API Reference has a lot of interesting methods. – Daniel Nalbach Mar 18 '16 at 16:43
  • Thanks Daniel. This 'map.setCenter(new window.google.maps.LatLng(lat, lng))' worked! This should be the accepted answer. – user2668392 Mar 18 '16 at 17:32

1 Answers1

0

This is a known issue dealing with maps and display: none css property (I assume this is your case). The map cannot calculate its size properly.

The solution is to create and initialize the map only when it is rendered, and not on page load.

If you can't, a possible workaround is to hide the map in another way:

position: absolute;
left: -100%;

You can find a more complete example on this thread that helped me in the past: Google Maps Display:None Problem

Community
  • 1
  • 1
Tmb
  • 450
  • 12
  • 20
  • 1
    Michal's answer in the question you linked is the correct one, not the position hiding that got accepted. The map should not be created and initialized until it will be visible, which solves the real issue. – Daniel Nalbach Mar 18 '16 at 16:36
  • The position hiding solve the issue anyway, because the maps can calculate its size correctly, but I agree, you identify the real problem! I updated the answer ;) – Tmb Mar 18 '16 at 16:39