Показать сообщение отдельно
  #6 (permalink)  
Старый 04.05.2018, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

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>

Последний раз редактировалось рони, 04.05.2018 в 09:41.
Ответить с цитированием