сделать цикл с картами google
Привет всем.
Помогите решить задачу. Есть код который работает для одной карты. Пытался повторить его, но гугл запускает карты только с одной инициализацией. Мне надо вывести 2 или 3 а то и 4 карты на странице. пытался сделать for (var k = 0; k < 2; ki++) { но не работает. Если создать руками еще один код внутри initMap() с другими названиями переменных, то работает. А как бы это сделать циклом?
<script>
var locations = [['Тула'],['Минск']];
var locations2 = [['Новосибирск'],['Бургас']];
</script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 0,lng: 0}
});
var markers = [];
var bounds = new google.maps.LatLngBounds();
geocoder = new google.maps.Geocoder();
for (var i = 0; i < locations.length; i++) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': locations[i][0]}, function(results, status) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
});
}
}
</script>
|
racheev,
для каждой карты нужен свой блок, строка 9 должна быть в цикле, и лучше class="map", а не id. |
а я как бы не понимаю что нужен свой блок.
есть решение подскажите, чего воду в ступе толочь. а на счет id и класса разницы никакой. |
var map=[];
for (var k = 0; k < 2; k++) {
map[k] = new google.maps.Map(document.getElementById('map'+k)
...
}
|
не выходит у меня каменный цветок. Помогите это сделать в цикл:
<div id="map"></div> +++ <div id="map2"></div>
<script>
var locations = [['Тула'],['Минск']];
var locations2 = [['Новосибирск'],['Бургас']];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 0,lng: 0},
disableDefaultUI: true,
scrollwheel: false
});
var markers = [];
var bounds = new google.maps.LatLngBounds();
geocoder = new google.maps.Geocoder();
for (var i = 0; i < locations.length; i++) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': locations[i][0]}, function(results, status) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
if (i > 0) {
var sitepath = new google.maps.Polyline({
path: [markers[0].getPosition(), marker.getPosition()],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
});
}
var map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 0,lng: 0},
disableDefaultUI: true,
scrollwheel: false
});
var markers2 = [];
var bounds2 = new google.maps.LatLngBounds();
geocoder2 = new google.maps.Geocoder();
for (var i = 0; i < locations2.length; i++) {
var geocoder2 = new google.maps.Geocoder();
geocoder.geocode({'address': locations2[i][0]}, function(results, status) {
var marker2 = new google.maps.Marker({
map: map2,
position: results[0].geometry.location
});
markers2.push(marker2);
bounds2.extend(marker2.getPosition());
map2.fitBounds(bounds2);
if (i > 0) {
var sitepath = new google.maps.Polyline({
path: [markers2[0].getPosition(), marker2.getPosition()],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map2
});
}
});
}
}
</script>
|
google.maps несколько карт
racheev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.map {
width: 600px; height: 400px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var locations = [['Тула','Минск'], ['Новосибирск','Бургас']];
function initMap() {
[].forEach.call(document.querySelectorAll(".map"), function(div, k) {
var map = new google.maps.Map(div, {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {
lat: 0,
lng: 0
}
});
var markers = [];
var bounds = new google.maps.LatLngBounds;
geocoder = new google.maps.Geocoder;
var location = locations[k];
for (var i = 0; i < location.length; i++) {
var geocoder = new google.maps.Geocoder;
geocoder.geocode({
"address": location[i]
}, function(results, status) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
bounds.extend(marker.getPosition());
map.fitBounds(bounds)
})
}
})
};
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div class="map"></div>
<div class="map"></div>
</body>
</html>
|
Спасибо работает. И стрелочки ездят. Осталось только разобраться как массив из php передать в javascript что бы открывалось все как надо.
|
Еще не поможете мне прицепиться к чему-нибудь что бы убрать одну стрелочку. я не могу понять почему i все время равно 2.
function initMap() {
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
[].forEach.call(document.querySelectorAll(".map"), function(div, k) {
var map = new google.maps.Map(div, {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {
lat: 0,
lng: 0
},
disableDefaultUI: true,
scrollwheel: false
});
var markers = [];
var bounds = new google.maps.LatLngBounds;
geocoder = new google.maps.Geocoder;
var location = locations[k];
for (var i = 0; i < location.length; i++) {
var geocoder = new google.maps.Geocoder;
geocoder.geocode({
"address": location[i]
}, function(results, status) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
alert(i);
/// как сделать что бы нечетный или четный запускал
/// i почему-то все время 2. я не понимаю почему
if (i % 2 == 0) {
var sitepath = new google.maps.Polyline({
path: [markers[0].getPosition(), marker.getPosition()],
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_OPEN_ARROW},
offset: '100%',
}],
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
animateCircle(sitepath);
})
}
})
};
|
racheev,
Функция строка 30 срабатывает при получении ответа от сервера, после завершения цикла (цикл прокручивается быстро, не дожидаясь ответа). Попробуйте вместо i использовать markers.length |
Цитата:
|
| Часовой пояс GMT +3, время: 14:03. |