Форум

psfdek · #1 (**permalink**) 15.07.2015, 14:19

Метки создаются и между ними переход осуществляется нормально, но не показывается контент при нажатии на метку.
Как это правильно сделать?

<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>

psfdek · #2 (**permalink**) 15.07.2015, 15:44

salexseen · #3 (**permalink**) 15.07.2015, 21:03

<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> [email]info@test.ru[/email]</div>',
                '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 86 <br> [email]info@test.ru[/email]</div>',
                '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 112 <br> [email]info@test.ru[/email]</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 content = arrContent[k];
                                    var contentWindow = new google.maps.InfoWindow({
                                        content: content
                                    });

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

                                    google.maps.event.addListener(marker, 'click', function(){
                                        contentWindow.open(map, marker);
                                    });

                                } 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>

join · #4 (**permalink**) 16.07.2015, 17:21

Суровый челябинский коп.

рони · #5 (**permalink**) 16.07.2015, 23:35

salexseen,

[HTML  run  height=500] тут код [/HTML]

salexseen · #6 (**permalink**) 17.07.2015, 02:01

Поправил, я думал что нужно использовать [JS][JS], так как js кода там больше чем html

psfdek · #7 (**permalink**) 17.07.2015, 08:09

Благодарю Вас!
salexseen и рони

psfdek · #8 (**permalink**) 17.07.2015, 08:14

А где в апи гугла про эти окна с контентом написано?
И как вообще они правильно называются?

рони · #9 (**permalink**) 17.07.2015, 10:31

psfdek,
это salexseen, спасибо, я сам только узнал об infowindows

psfdek · #10 (**permalink**) 17.07.2015, 13:10

Блин, а как этому окну добавить класс?

Форум

Справочник

Discord чат

Курсы javascript