Показать сообщение отдельно
  #1 (permalink)  
Старый 15.07.2015, 14:19
Аватар для psfdek
Профессор
Отправить личное сообщение для psfdek Посмотреть профиль Найти все сообщения от psfdek
 
Регистрация: 14.02.2014
Сообщений: 157

Контент метки google maps
Метки создаются и между ними переход осуществляется нормально, но не показывается контент при нажатии на метку.
Как это правильно сделать?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
    var geocoder;
    var map;
    var query = new Array( 'Челябинск, ул. Богдана-хмельницкого, д. 27', 'Челябинск, ул. Кирова, д. 86', 'Челябинск, ул. Кирова, д. 112');
    var idArr = new Array("mp0", "mp1", "mp2");
    var arrContent = new Array(
        '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Богдана-хмельницкого, д. 27 <br> info@test.ru</div>',
        '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 86 <br> info@test.ru</div>',
        '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 112 <br> info@test.ru</div>'
  );

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var mapOptions = {
            zoom: 15,
            sensor:'true',
            disableDefaultUI:true,
            scrollwheel:false,
            styles:[
                {"stylers":[
                    {"saturation":-100},
                    {"gamma":1}
                ]},
                {"elementType":"labels.text.stroke", "stylers":[
                    {"visibility":"off"}
                ]},
                {"featureType":"poi.business", "elementType":"labels.text", "stylers":[
                    {"visibility":"off"}
                ]},
                {"featureType":"poi.business", "elementType":"labels.icon", "stylers":[
                    {"visibility":"off"}
                ]},
                {"featureType":"poi.place_of_worship", "elementType":"labels.text", "stylers":[
                    {"visibility":"off"}
                ]},
                {"featureType":"poi.place_of_worship", "elementType":"labels.icon", "stylers":[
                    {"visibility":"off"}
                ]},
                {"featureType":"road", "elementType":"geometry", "stylers":[
                    {"visibility":"simplified"}
                ]},
                {"featureType":"water", "stylers":[
                    {"visibility":"on"},
                    {"saturation":50},
                    {"gamma":0},
                    {"hue":"#50a5d1"}
                ]},
                {"featureType":"administrative.neighborhood", "elementType":"labels.text.fill", "stylers":[
                    {"color":"#333333"}
                ]},
                {"featureType":"road.local", "elementType":"labels.text", "stylers":[
                    {"weight":0.5},
                    {"color":"#333333"}
                ]},
                {"featureType":"transit.station", "elementType":"labels.icon", "stylers":[
                    {"gamma":1},
                    {"saturation":50}
                ]}
            ]
        }
        map = new google.maps.Map(document.getElementById('canvas-map_1'), mapOptions);
        codeAddress();

        this.zoomOut = function () {
            map.setZoom(map.getZoom() - 1)
        };
        this.zoomIn = function () {
            map.setZoom(map.getZoom() + 1)
        };
    }

    function codeAddress() {

        for (var key in query) {
            var address = query[key];
            geocoder.geocode({
                        'address': address
                    }, function(k) {
                return function(results, status) {
                    var image = 'http://png.findicons.com/files/icons/2266/rm_kute_toolbar_icons/60/identityblue.png';
                    if (status == google.maps.GeocoderStatus.OK) {

                        var a = document.getElementById(idArr[k]);
                        a.onclick = function() {
                            map.setZoom(17);
                            map.setCenter(results[0].geometry.location);
                        }
                        if(k==0){
                            map.setCenter(results[0].geometry.location);
                        }

                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon:image,
                            content:arrContent[k]
                        });

                    } else {
                        console.log('Geocode was not successful for the following reason: ' + status);
                    }
                }
            }(key)
            );

        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<section class="SectionMaps">
        <div class="SectionMaps_wrap">
            <div class="SectionMaps_wrap_title">
                <ul class="SectionMaps_wrap_title_tabs">
                    <li class="SectionMaps_wrap_title_tabs_item" id="mp0">
                        Челябинск 1
                    </li>
                    <li class="SectionMaps_wrap_title_tabs_item" id="mp1">
                        Челябинск 2
                    </li>
                    <li class="SectionMaps_wrap_title_tabs_item" id="mp2">
                        Челябинск 3
                    </li>
                </ul>

            </div>
        </div>
        <div class="SectionMaps_map">
            <div id="canvas-map_1"></div>
        </div>
</section>

<style>
.SectionMaps_wrap_title_tabs_item{
	height:50px;
	width:150px;
	display:inline-block;
	cursor:pointer;
}
#canvas-map_1{
	height:300px;
}
</style>
Ответить с цитированием