Google Map panels not refreshing as expected

Question

I'm currently having an issue with my google maps implementation and I was hoping I could get some help from the S.O. google maps community.

Currently I'm creating a map adding a bunch of markers and then fit the map to the bounds of the markers. However when the map is displayed only half of the map has been updated by the map.fitBounds(bounds).

I'm not sure how to solve for this. I've never seen a map partially zoomed like this before.

Thanks in advance to everyone who submits a response!

Here is the code to create the map:

 <script>
     var markersData = [
         @if(count($properties) > 0)

             @foreach($properties as $property)

                 @if($property->lat == 0 && $property->lng == 0)
                    // Don't add the marker
                 @else
                    {
                        lat: "{{ $property->lat }}",
                        lng: "{{ $property->lng }}",
                        address: "{{ $property->street }}",
                        citystatezip: "{{ $property->city.', '.$property->state.' '.$property->zip }}"
                     },
                 @endif

             @endforeach

         @endif
     ];

     function displayMarkers(){

         if(markersData.length > 0){
             var bounds = new google.maps.LatLngBounds();
             for (var i = 0; i < markersData.length; i++){

                 var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
                 var address = markersData[i].address;
                 var citystatezip = markersData[i].citystatezip;

                 createMarker(latlng, address, citystatezip);

                 bounds.extend(latlng);
             }

             // JUST ADDED THIS CODE AND ITS WORKING NOW
             google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
                 this.setZoom(map.getZoom()-1);

                 if (this.getZoom() > 15) {
                     this.setZoom(15);
                 }
             });

             map.fitBounds(bounds);

         }else{
             var center = new google.maps.LatLng( "{{$county->lat}}", "{{ $county->lng }}" );
             map.panTo(center);
         }

     }

     function createMarker(latlng, address, citystatezip){
         var marker = new google.maps.Marker({
             map: map,
             position: latlng,
             title: address,
         });

         google.maps.event.addListener(marker, 'click', function() {

                 var iwContent = '<div id="iw_container">' +
                         '<div class="iw_title">' + address + '</div>' +
                         '<div class="iw_content">' + citystatezip + '</div></div>';

             infoWindow.setContent(iwContent);

             infoWindow.open(map, marker);
         });
     }

     function initialize() {

         var mapOptions = {
             zoom: 9,
             mapTypeId: 'roadmap',
             scrollwheel: false
         };

         map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

         infoWindow = new google.maps.InfoWindow();

         google.maps.event.addListener(map, 'click', function() {
             infoWindow.close();
         });

         displayMarkers();

     }
     google.maps.event.addDomListener(window, 'load', initialize);


</script>

This is related to a feature that is not in production yet because of this issue so I can't provide a URL. — ProfessorGT, Apr 18 '17 at 20:01
Provide the necessary code to reproduce the issue, not a link. — MrUpsidown, Apr 18 '17 at 20:50

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Ok, I figured it out by searching some more on S.O.

I added this code to the section of code that adds the markers (see code above - I updated my example code to include this new snippet)

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
             this.setZoom(map.getZoom()-1);

             if (this.getZoom() > 15) {
                 this.setZoom(15);
             }
         });

Thanks to this post on SO: How to ensure that google map is loaded?

score -1 · Answer 2 · answered Apr 18 '17 at 18:09

-1

function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: new google.maps.LatLng(4,-8), mapTypeId: 'terrain' });

The zoom may be doing it since the map renders first.

answered Apr 18 '17 at 18:09

Rickey Alterman

11
6

So, are you suggesting to just reset the map options again after I call fitBounds? – ProfessorGT Apr 18 '17 at 18:24
Its been some time since I worked with maps but I remember I had to do a refresh after an ajax call because of how the map renders. This is where I found the info:https://developers.google.com/maps/documentation/javascript/tutorial – Rickey Alterman Apr 18 '17 at 19:01
This did not work. thank you for attempting to assist. – ProfessorGT Apr 18 '17 at 21:24

Google Map panels not refreshing as expected

2 Answers2