Как добавить динамическую карту google

Я пытаюсь использовать API MAP Google v3 со следующим кодом.Как добавить динамическую карту google

<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script> 
    <script type="text/javascript"> 
    jQuery(function($) 
    { 
     var i = 1; 

     initMap($('.map')); 

     function initMap($map) 
     { 
      google.maps.event.addDomListener(window, 'load', function() 
      { 
       var myOptions = { 
        center: new google.maps.LatLng(-16.920334, 145.770859), 
        zoom: 12, 
       }; 
       var drawingManager = new google.maps.drawing.DrawingManager(); 
       var map = new google.maps.Map($map[0], myOptions); 
       drawingManager.setMap(map); 
      }); 
     } 

     $('body').on('click', '.add-map', function() 
     { 
      i++; 
      $('.maps').append('<div class="map-' + i + '" style="width: 800px; height: 500px;"></div>'); 
      initMap($('.map-' + i)); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <input type="button" class="add-map" value="Add Map"> 
    <div class="maps"> 
     <div class="map" style="width: 800px; height: 500px;"></div> 
    </div> 
</body> 
</html>

Что я хочу сделать, когда пользователь нажимает кнопку Add Map, карта будет создана динамически. Карта по умолчанию загружена, но следующая карта отсутствует. Как я могу исправить эту проблему, спасибо!

Вот my fiddle demo

источник

2015-12-11 Duc Doan

отсутствует «-» в initMap ($ ('.map' + i)); –

Подсказка: окно уже загружено, когда вы нажимаете кнопку и никогда больше не запускаете событие загрузки. – Adam

@ShailendraSharma спасибо, я добавил '-', но он не может исправить мою проблему. –

Это working fiddle вашего кода, что случилось с вашим кодом вы открываете карту на оконной нагрузке initMap($('.map'));, которые идут google.maps.event.addDomListener(window, 'load', function(), а затем вы называете то же функцию по щелчку, что не имеют никакого смысла , потому что это событие линии окна регистра нагрузки для запуска функции внутри это блок

и добавления новой карты в существующих картах также не работает, то это все надеется, что это может помочь

это не полный код просто идея, как это будет работать

источник

2015-12-11 13:09:38

awesome! Спасибо большое –

Как добавить динамическую карту google

ответ

Смежные вопросы