[salexseen]

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