API Карт Google v3 – создание нескольких карт с маркерами на одной странице

Я пытаюсь создать слайдер с тремя слайдами, каждый из которых содержит мини-карту с маркером, указывающим на определенное место. Мне удалось создать один слайд, но каждая попытка создать более одного на этой странице приводит к сбою. Вот мой код:

HTML + PHP

• Проводка JSON с jquery ajax для PHP
• Выполнение функции PHP из JSON
• Как сделать разбиение на страницы jquery?
• Автозаполнение JQuery, заполняется данными из pHp json
• Передача запроса MySQL через Javascript

<?php if (have_rows('job_offers')): ?> <?php $rows = get_field('job_offers'); $row_count = count($rows); for ($i = 0; $i <= 2; $i++) { ?> <li> <div id='googleMap<?php echo $i; ?>' style="position:absolute;top:0;right:0;width:180px;height:100%;"></div> </li> <?php } ?> <?php endif; ?> 

и jQuery

 var geocoder = new google.maps.Geocoder(); var map; var locations = ["London",'Paris','Barcelona']; var pos; function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function getGeoCode() { for (var i=0; i<3 ; i++) { geocoder.geocode({'address': locations[i]}, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [ { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]} ] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } } google.maps.event.addDomListener(window, 'load', initialize); 

Когда я не пытался использовать массивы, все было в порядке. Я буду благодарен за любые намеки. Cheers, E.

• Вход в PHP AJAX, этот метод безопасен?
• Сохранение китайского символа в oracle с использованием ajax не работает
• Как использовать Jquery-File-Upload PHP с базой данных в последней версии?
• Использование jQuery с Selenium WebDriver. Как передать объект JSON в WebElement?
• Передача массива через jQuerys $ .post уменьшает позиции

Related of "API Карт Google v3 – создание нескольких карт с маркерами на одной странице"

 var geocoder = new google.maps.Geocoder(); var map = []; var locations = ["London",'Paris','Barcelona']; var pos = []; var infowindow = new google.maps.InfoWindow({}); function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function makeMap(i) { geocoder.geocode({'address': locations[i]}, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [ { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]} ] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], // icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } function getGeoCode() { for (var i=0; i<3 ; i++) { makeMap(i); } } google.maps.event.addDomListener(window, 'load', initialize); 

 var geocoder = new google.maps.Geocoder(); var map = []; var locations = ["London", 'Paris', 'Barcelona']; var pos = []; var infowindow = new google.maps.InfoWindow({}); function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function makeMap(i) { geocoder.geocode({ 'address': locations[i] }, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [{ stylers: [{ hue: '#C4268C' }, { lightness: -60 }, { saturation: 100 }] }] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], // icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } function getGeoCode() { for (var i = 0; i < 3; i++) { makeMap(i); } } google.maps.event.addDomListener(window, 'load', initialize); 

 #googleMap0, #googleMap1, #googleMap2, #googleMap3 { width: 500px; height: 500px; } 

 <script src="http://maps.google.com/maps/api/js"></script> <table border="1"> <tr> <td> <div id="googleMap0"></div> </td> </tr> <tr> <td> <div id="googleMap1"></div> </td> </tr> <tr> <td> <div id="googleMap2"></div> </td> </tr> </table>