Создание несколько гугл карт через цикл

Вот HTML

<div class="slide_map" id="map_sl_1" data-lat= "50.4488889" data-lat= "30.5295878" data-zoom = "16"></div>
<div class="slide_map" id="map_sl_2" data-lat= "51.4488889" data-lat= "31.5295878" data-zoom = "10"></div>

Вот JS

function mapCreate(id, latval, lngval, z) {
  var map = new google.maps.Map(document.getElementById(id), {
    center: {lat: latval, lng: lngval},
    scrollwheel: false,
    scaleControl: false,
    zoom: z,
    styles: styles
  });
  var marker = new google.maps.Marker({
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    position: {lat: latval, lng: lngval},
    title: ''
  });
}

$(document).ready(function() {
    $(".slide_map").each(function() {
        id = $(this).attr("id");
        latval = parseFloat($(this).attr("data-lat"));
        lngval = parseFloat($(this).attr("data-lat"));
        z = parseInt($(this).attr("data-zoom"));
        mapCreate(id, latval, lngval, z);
    });
});

Браузер пишет ошибку

Uncaught ReferenceError: google is not defined at mapCreate

Как можно создать Google карту через цикл?


Ответы (1 шт):

Автор решения: Denis

Пришлось сделать вот так

<script>
    window.addEventListener("load", function(){
        mapCreate("map_sl_1", 50.4488889, 30.5295878, 15);
        mapCreate("map_sl_2", 50.4488889, 30.5295888, 15);
        mapCreate("map_sl_3", 50.4488889, 30.5295868, 15);
        mapCreate("map_sl_4", 50.4488889, 30.5295898, 15);
    });
</script>
→ Ссылка