想用循环加载多个谷歌地图

Question

i am using a php while loop to create a div class multiple times

so every time i have different lat lng

also in every loop i initialize a new map on a different div to create the map and here is my code

<script type="text/javascript">
          google.maps.event.addDomListener(window, 'load', initialize);

            function initialize() {

                var title= "Title";
                var lat = <?php echo $lat; ?>;
                var lng = <?php echo $lng; ?>;
                var myLatlng = new google.maps.LatLng(lat,lng);
                var mapOptions = {
                    zoom: 14,
                    center: myLatlng
                  }
                var map = new google.maps.Map(document.getElementById('beezMapBig<?php echo $tmp;?>'), mapOptions);

                var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Hello World!'
                    });
                google.maps.event.addDomListener(window, "resize", function() {
                    var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center); 
                }); 

            }


          </script>

everytime the load works with the different lat,lng but i dont have the map 100% loaded (i cant post image due to low reputation...imagine that the map is loading like 50% with the rest grey blank)

now the weird part is that when i press f12 at any browser to run the console to see some problems/failures the map is getting 100% loaded and resized.

Any ideas why this occurs and why the code is running correctly when run the browser console??

Thanks in advance!!

Answer 1

Had same issue and solved by doing this. write ready() function. and then place the window resize functions in the initialize method itself (before initializing the map). It will help.