want to load multiple google maps with loop

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

http://stackoverflow.com/questions/17059816/google-maps-v3-load-partially-on-top-left-corner-resize-event-does-not-work — Dmitry Volokh, Jan 27 '15 at 11:31
What sets the size of the "map" divs? Do you really have multiple functions named "initialize"? — geocodezip, Jan 27 '15 at 14:04

score 0 · Answer 1 · answered Jan 27 '15 at 11:25

0

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.

answered Jan 27 '15 at 11:25

Prabhu Vignesh Rajagopal

1,028
10
19

Write $(document).ready() function first, then put your (window, 'resize') function before the map initializing. do some arrangements in code.. ll work.. you done almost all. – Prabhu Vignesh Rajagopal Jan 27 '15 at 11:36
it cant work beacause i am using a while loop....so document ready function is running only 1 time.... – Spiros Bobolakis Jan 27 '15 at 11:48
2

no.. use doc.ready fn() after the loop. STEP:1--doc.ready fn() STEP:2--your loop STEP:3--initializing() STEP:4--(window, 'resize') function() STEP:5--map initializing fn() like this – Prabhu Vignesh Rajagopal Jan 27 '15 at 11:52

score 0 · Answer 2 · answered Mar 01 '19 at 07:54

I can use PHP and JS. I have array with 3 elements.

Firstly Im generating div with unique id

   <?php $i=0; foreach ($array as $single) : $i++; ?>

      <div id="map_<?php echo $i; ?>" style="width: 100%; height: 300px;"></div>

    <?php endforeach; ?>

Then im opening script tag like this

 <script>
    var maps = [];
    <?php $i = 0; foreach($array as $single): $i++; ?>
    maps.push({
      mapContainer: 'map_'+<?php echo $i; ?>,
      lat: <?php echo $single['mapa_google']['lat']; ?>,
      lng: <?php echo $single['mapa_google']['lng']; ?>,
    });
    <?php endforeach; ?>

   function initMap() {
     for(var i = 0; i < maps.length; i++)
     {
       // The location of Uluru
       var uluru = {lat: maps[i].lat, lng: maps[i].lng};
       // The map, centered at Uluru
       var map = new google.maps.Map(
         document.getElementById(maps[i].mapContainer), {zoom: 16, center: uluru}
       );
       // The marker, positioned at Uluru
       var marker = new google.maps.Marker({position: uluru, map: map});
     }
   }
 </script>

On the bottom on my page im using async script

   <script async defer
           src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
   </script>

Of course in my array I have data for 3 google maps.

want to load multiple google maps with loop

2 Answers2