谷歌地图 - 点击引脚后标记部分

Question

我有2面的页面 -

一方面我有部分。每个人都是旅行中的一天，其中包含文本和位置。另一方面，我有一个带有引脚的谷歌地图，引用了各个部分。

我想允许用户点击图钉，页面将滚动到相关部分，并用背景颜色绘制部分。

Ans也相反 - 当用户点击某个部分而不是相关的引脚会改变他的颜色。

我不确定如何使用Google-Maps ...

这是我的脚本代码：

<!-- Google map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=fUA&callback=initMap" type="text/javascript"></script>
    <script type="text/javascript">
     var markers = [

            {
                "title": "Praho",
                "lat": "50.075538",
                "lng": "14.437801",
                "description": "Day: 1"
            }           
         , 
            {
                "title": "Český ráj",
                "lat": "50.586675",
                "lng": "15.157302",
                "description": "Day: 2"
            }           
         , 
            {
                "title": "Bešeňová",
                "lat": "49.100211",
                "lng": "19.434720",
                "description": "Day: 3"
            }           
            ];
    var infoWindows = []; // for open/close button

    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);   

    window.onload = function () {

        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });

            latlngbounds.extend(marker.position);

            // open popup by click
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            //


            // Open all popups
            var infowindow = new google.maps.InfoWindow({
                content: '<div id="iw-container">' +'<div class="iw-title">' + data.description + '</div>' + '</div>',
                maxWidth: 350
            });

        /*  google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.open(map, marker);
            });
        */  
            infowindow.open(map, marker);               
            //
            //Open/close infoWindow - Store all marker and infowindow in JSON array...
            var dict_map = {};
            dict_map['infoWinObj'] = infowindow;
            dict_map['markerObj'] = marker;

            //push JSON dict in array
            infoWindows.push(dict_map);               
            //  
        }
        map.setCenter(latlngbounds.getCenter());
    //  map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

    }

    function closeAllInfoWindows()
    {
        for (var i=0;i<infoWindows.length;i++) {
           if (infoWindows[i]['infoWinObj'])
              infoWindows[i]['infoWinObj'].close();
        }
    } 

    function openAllInfoWindows()
    {
        for (var i=0;i<infoWindows.length;i++) {                   
              infoWindows[i]['infoWinObj'].open(map, infoWindows[i]['markerObj']);
        }
    }   

    </script>