0

function HomeControl(controlDiv, map) {

    google.maps.event.addDomListener(zoomout, 'click', function () {
        var currentZoomLevel = map.getZoom();
        if (currentZoomLevel != 0) {
            map.setZoom(currentZoomLevel - 1);
        }
    });

    google.maps.event.addDomListener(zoomin, 'click', function () {
        var currentZoomLevel = map.getZoom();
        if (currentZoomLevel != 21) {
            map.setZoom(currentZoomLevel + 1);
        }
    });
}


function initialize() {
    var mapCanvas = document.getElementById('map');
    var myLatlng = {
        lat: 50.5065401,
        lng: 30.5840678
    };
    var mapOptions = {
        zoom: 13,
        center: myLatlng,
        Marker: true,
    };

    var map = new google.maps.Map(mapCanvas, mapOptions);

    var locations = [
        ['Oliver1', 52.231871, 21.005841],
        ['Oliver2', 50.509616, 30.7880527],
    ];

    var marker, i;
    var Oliver1 = document.getElementById("Oliver1");
    var Oliver2 = document.getElementById("Oliver2");
    var infowindow = new google.maps.InfoWindow();

    Oliver1.addEventListener("click", function () {
        map.setZoom(15);
        map.setCenter({
            lat: 50.5065401,
            lng: 30.5840678
        });
    });

    Oliver2.addEventListener("click", function () {
        map.setZoom(15);
        map.setCenter({
            lat: 50.509616,
            lng: 30.7880527
        });
    });


    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                map.setZoom(15);
                map.setCenter(marker.getPosition());
            }
        })(marker, i));


        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                map.setZoom(15);
                map.setCenter(marker.getPosition());
            }
        })(marker, i));

    }
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);
}


google.maps.event.addDomListener(window, 'load', HomeControl);
google.maps.event.addDomListener(window, 'load', initialize);
#map {
    margin: 0 auto;
    width: 580px;
    height: 340px;
}

#places {
    position: absolute;
    top: 30px;
    left: 30px;
}

.places__place {
    vertical-align: top;
    padding: 10px;
    margin: 5px;
    font-size: 22px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #e67e22;
    border: 0;
    font-style: Arial;
    border-bottom: 2px solid #da751c;
    border-radius: 14px;
    opacity: 0.9;
    cursor: pointer;
    &:hover {
        background: #d35400;
    }
}

.places__place {
    font-size: 16px;
}
<body>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <div id="map"></div>
    <div id="places">
        <div class="places__place" id="Oliver1"><span>Oliver1</span></div>
        <div class="places__place" id="Oliver2"><span>Oliver2</span></div>
    </div>
</body>

Ссылка: https://codepen.io/anon/pen/paPyma


Спасибо за внимание, нашел ошибку))

2
  • Как сделать чтобы кнопка оставалась активной (зажатой) пока пользователь не нажмет другую? чтобы было понятно какой адрес выбран сейчас? 12 фев 2018 в 13:49
  • Сделайте из них радиокнопки и соответственно стилизуйте 12 фев 2018 в 14:23

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.