2个地图在同一页面上有多个标记

时间:2017-08-17 21:13:09

标签: google-maps-api-3

我在同一页面上有2个谷歌地图。每个人都有一套不同的标记。

在第一张地图上,当您指示信息窗显示的标记时,但在第二张地图上标记为apear,但不要打开信息窗口。

您可以在此页面中看到:http://www.qd1.com.br/maptest/

我该如何解决?

代码在这里:

<h1>Map 1</h1>
<div id="map-sao-paulo" class="mapa-home"></div>
<h1>Map 2</h1>
<div id="map-jundiai" class="mapa-home"></div>

<style>
  .mapa-home {
    width: 100%;
    height: 600px;
    background-color: grey;
  }
</style>

<script>
        var urlPortfolio = 'http://www.qd1.com.br/maptest/';
        var urlTema = 'http://www.qd1.com.br/maptest/';


        /* MAP FUNCTIONS */
        var locations = [
              ['Rua Oscar Caravelas', -23.544130, -46.694866, 'Rua Oscar Caravelas', 'futuro', 'Rua Oscar Caravelas, Vila Madalena, São Paulo, SP','rua-oscar-caravelas'],
              ['Residencial Tangará Pinheiros', -23.561472, -46.681912, 'Residencial Tangará Pinheiros', 'entregue', 'Rua Cônego Eugenio Leite nº 866, Pinheiros, São Paulo, SP','residencial-tangara-pinheiros'],
              ['Home Studio 47', -23.553518, -46.678283, 'Home Studio 47', 'lancamento', 'R. Capote Valente, 980 - Pinheiros São Paulo - SP','home-studio-47'],
              ['Edifício Praça dos Pinheiros', -23.541635, -46.704697, 'Edifício Praça dos Pinheiros', 'entregue', 'Rua Antonio Borba, 489 Vila Madalena, São Paulo, SP','edificio-praca-dos-pinheiros'],
              ['Ed. Hit Paulista', -23.563348, -46.643135, 'Ed. Hit Paulista', 'lancamento', 'Rua Arthur Prado, 341, Bela Vista, São Paulo, SP','hit-paulista'],
              ['Ed. Praça de Veneza', -23.545856, -46.696868, 'Ed. Praça de Veneza', 'entregue', 'Av. das Corujas, 584 Alto de Pinheiros, São Paulo, SP','ed-praca-de-veneza'],
        ]
        var locations2 = [
              ['Av. Américo Bruno', -23.189918, -46.869183, 'Av. Américo Bruno', 'futuro', 'Av. Américo Bruno, Jundiaí, SP','jundiai-av-americo-bruno'],
              ['Av. Frederico Ozanon', -23.183679, -46.877656, 'Av. Frederico Ozanon', 'futuro', 'Av. Frederico Ozanon, Jundiaí, SP','jundiai-av-frederico-ozanon'],
              ['Casas Vila Malota', -23.215822, -46.910892, 'Casas Vila Malota', 'entregue', 'Rua dos Jequitibás 850, Malota, Jundiaí, SP','casas-vila-malota'],
        ]
        var markers = new Array();
        var markers2 = new Array();
        var map;
        var map2;
        var estilos = [
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#aaaaaa"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#dddddd"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#a7ce84"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "saturation": 36
                        },
                        {
                            "color": "#333333"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f1f1f1"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#efefef"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#efefef"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                }
                ];


        var contentContainer = [];
        var contentContainer2 = [];
        function initialize() {
            map = new google.maps.Map(document.getElementById('map-sao-paulo'), {
                zoom: 14,
                scrollwheel: false,
                center: new google.maps.LatLng(-23.553518, -46.678283),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                styles: estilos
            });
            map2 = new google.maps.Map(document.getElementById('map-jundiai'), {
                zoom: 14,
                scrollwheel: false,
                center: new google.maps.LatLng(-23.197818, -46.880150),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                styles: estilos
            });
            var infowindow = new google.maps.InfoWindow({
                maxWidth: 350
            });
            var iconCounter = 0;
            var iconCounter2 = 0;
            // Add the markers and infowindows to the map
            for (var i = 0; i < locations.length; i++) {
                contentContainer.push('<div id="iw-container">'+locations[i][3]+'</div>');
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    url: urlPortfolio + locations[i][6],
                    icon: urlTema + 'images/map-marker-'+locations[i][4]+'.png',
                    title: 'Saiba mais'
                });
                markers.push(marker);
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function(){
                        infowindow.setContent('<a href="' + urlPortfolio + locations[i][6] + '" class="thumb-map">' + locations[i][3] + '</a>');
                        infowindow.open(map, marker);
                        var lat = marker.getPosition().lat();
                        var lng = marker.getPosition().lng();
                        var latlng = new google.maps.LatLng(lat, lng);
                        map.setCenter(latlng);
                    }
                })(marker, i));
            }
            for (var i = 0; i < locations2.length; i++) {
                contentContainer.push('<div id="iw-container">'+locations2[i][3]+'</div>');
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
                    map: map2,
                    url: urlPortfolio + locations2[i][6],
                    icon: urlTema + 'images/map-marker-'+locations2[i][4]+'.png',
                    title: 'Saiba mais'
                });
                markers.push(marker2);
                google.maps.event.addListener(marker2, 'click', (function (marker2, i) {
                    return function(){
                        infowindow2.setContent('<a href="' + urlPortfolio + locations2[i][6] + '" class="thumb-map">' + locations2[i][3] + '</a>');
                        infowindow2.open(map2, marker2);
                        var lat2 = marker2.getPosition().lat();
                        var lng2 = marker2.getPosition().lng();
                        var latlng2 = new google.maps.LatLng(lat2, lng2);
                        map2.setCenter(latlng2);
                    }
                })(marker2, i));
            }
            google.maps.event.addListener(infowindow, 'domready', function() {
               var iwOuter = jQuery('#map-sao-paulo .gm-style-iw');
               iwOuter.css({'margin-top' : '0px','font-weight' : 'bold'});
               var iwBackground = iwOuter.prev();
               iwBackground.children(':nth-child(4)').css({'background-color': '#fff','border': 'solid 1px #aaa'});
               iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground.children(':nth-child(2)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'display: none;'});
            });
            google.maps.event.addListener(infowindow2, 'domready', function() {
               var iwOuter2 = jQuery('#map-jundiai .gm-style-iw');
               iwOuter2.css({'margin-top' : '0px','font-weight' : 'bold'});
               var iwBackground2 = iwOuter2.prev();
               iwBackground2.children(':nth-child(4)').css({'background-color': '#fff','border': 'solid 1px #aaa'});
               iwBackground2.children(':nth-child(1)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground2.children(':nth-child(2)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground2.children(':nth-child(3)').attr('style', function(i,s){ return s + 'display: none;'});
            });
            autoCenter();
            autoCenter2();
        }
        // function loadURL(marker) {
        //     return function () {
        //         window.location.href = marker.url;
        //     }
        // }
        function triggerClick(i) {
            google.maps.event.trigger(markers[i], 'click');
            //map.getBounds();
        }
        function triggerClick2(i) {
            google.maps.event.trigger(markers2[i], 'click');
            //map.getBounds();
        }
        function autoCenter() {
            //  Create a new viewpoint bound
            var bounds = new google.maps.LatLngBounds();
            //  Go through each...
            for (var i = 0; i < markers.length; i++){
                bounds.extend(markers[i].position);
            }
            //  Fit these bounds to the map
            map.fitBounds(bounds);
        }
        function autoCenter2() {
            //  Create a new viewpoint bound
            var bounds2 = new google.maps.LatLngBounds();
            //  Go through each...
            for (var i = 0; i < markers2.length; i++){
                bounds2.extend(markers2[i].position);
            }
            //  Fit these bounds to the map
            map2.fitBounds(bounds2);
        }
        /* MAP FUNCTIONS */


    </script> 
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyApai5Yz8RBxzygQkoJXWoqehnZKeMJLQs&libraries=places&callback=initialize">
    </script>

1 个答案:

答案 0 :(得分:0)

在第二个循环中,您需要更改:

contentContainer.push('<div id="iw-container">'+locations2[i][3]+'</div>');

contentContainer2.push('<div id="iw-container">'+locations2[i][3]+'</div>');

在同一个循环中你需要改变:

markers.push(marker2);

markers2.push(marker2);

你忘了添加:

var infowindow2 = new google.maps.InfoWindow({
    maxWidth: 350
});

代码已更新:

<h1>Map 1</h1>
<div id="map-sao-paulo" class="mapa-home"></div>
<h1>Map 2</h1>
<div id="map-jundiai" class="mapa-home"></div>

<style>
  .mapa-home {
    width: 100%;
    height: 600px;
    background-color: grey;
  }
</style>

<script>
        var urlPortfolio = 'http://www.qd1.com.br/maptest/';
        var urlTema = 'http://www.qd1.com.br/maptest/';


        /* MAP FUNCTIONS */
        var locations = [
              ['Rua Oscar Caravelas', -23.544130, -46.694866, 'Rua Oscar Caravelas', 'futuro', 'Rua Oscar Caravelas, Vila Madalena, São Paulo, SP','rua-oscar-caravelas'],
              ['Residencial Tangará Pinheiros', -23.561472, -46.681912, 'Residencial Tangará Pinheiros', 'entregue', 'Rua Cônego Eugenio Leite nº 866, Pinheiros, São Paulo, SP','residencial-tangara-pinheiros'],
              ['Home Studio 47', -23.553518, -46.678283, 'Home Studio 47', 'lancamento', 'R. Capote Valente, 980 - Pinheiros São Paulo - SP','home-studio-47'],
              ['Edifício Praça dos Pinheiros', -23.541635, -46.704697, 'Edifício Praça dos Pinheiros', 'entregue', 'Rua Antonio Borba, 489 Vila Madalena, São Paulo, SP','edificio-praca-dos-pinheiros'],
              ['Ed. Hit Paulista', -23.563348, -46.643135, 'Ed. Hit Paulista', 'lancamento', 'Rua Arthur Prado, 341, Bela Vista, São Paulo, SP','hit-paulista'],
              ['Ed. Praça de Veneza', -23.545856, -46.696868, 'Ed. Praça de Veneza', 'entregue', 'Av. das Corujas, 584 Alto de Pinheiros, São Paulo, SP','ed-praca-de-veneza'],
        ]
        var locations2 = [
              ['Av. Américo Bruno', -23.189918, -46.869183, 'Av. Américo Bruno', 'futuro', 'Av. Américo Bruno, Jundiaí, SP','jundiai-av-americo-bruno'],
              ['Av. Frederico Ozanon', -23.183679, -46.877656, 'Av. Frederico Ozanon', 'futuro', 'Av. Frederico Ozanon, Jundiaí, SP','jundiai-av-frederico-ozanon'],
              ['Casas Vila Malota', -23.215822, -46.910892, 'Casas Vila Malota', 'entregue', 'Rua dos Jequitibás 850, Malota, Jundiaí, SP','casas-vila-malota'],
        ]
        var markers = new Array();
        var markers2 = new Array();
        var map;
        var map2;
        var estilos = [
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#aaaaaa"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#dddddd"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#a7ce84"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "saturation": 36
                        },
                        {
                            "color": "#333333"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f1f1f1"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#efefef"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#efefef"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                }
                ];


        var contentContainer = [];
        var contentContainer2 = [];
        function initialize() {
            map = new google.maps.Map(document.getElementById('map-sao-paulo'), {
                zoom: 14,
                scrollwheel: false,
                center: new google.maps.LatLng(-23.553518, -46.678283),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                styles: estilos
            });
            map2 = new google.maps.Map(document.getElementById('map-jundiai'), {
                zoom: 14,
                scrollwheel: false,
                center: new google.maps.LatLng(-23.197818, -46.880150),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                styles: estilos
            });
            var infowindow = new google.maps.InfoWindow({
                maxWidth: 350
            });
        var infowindow2 = new google.maps.InfoWindow({
                maxWidth: 350
            });
            var iconCounter = 0;
            var iconCounter2 = 0;
            // Add the markers and infowindows to the map
            for (var i = 0; i < locations.length; i++) {
                contentContainer.push('<div id="iw-container">'+locations[i][3]+'</div>');
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    url: urlPortfolio + locations[i][6],
                    icon: urlTema + 'images/map-marker-'+locations[i][4]+'.png',
                    title: 'Saiba mais'
                });
                markers.push(marker);
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function(){
                        infowindow.setContent('<a href="' + urlPortfolio + locations[i][6] + '" class="thumb-map">' + locations[i][3] + '</a>');
                        infowindow.open(map, marker);
                        var lat = marker.getPosition().lat();
                        var lng = marker.getPosition().lng();
                        var latlng = new google.maps.LatLng(lat, lng);
                        map.setCenter(latlng);
                    }
                })(marker, i));
            }
            for (var i = 0; i < locations2.length; i++) {
                contentContainer2.push('<div id="iw-container">'+locations2[i][3]+'</div>');
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
                    map: map2,
                    url: urlPortfolio + locations2[i][6],
                    icon: urlTema + 'images/map-marker-'+locations2[i][4]+'.png',
                    title: 'Saiba mais'
                });
                markers2.push(marker2);
                google.maps.event.addListener(marker2, 'click', (function (marker2, i) {
                    return function(){
                        infowindow2.setContent('<a href="' + urlPortfolio + locations2[i][6] + '" class="thumb-map">' + locations2[i][3] + '</a>');
                        infowindow2.open(map2, marker2);
                        var lat2 = marker2.getPosition().lat();
                        var lng2 = marker2.getPosition().lng();
                        var latlng2 = new google.maps.LatLng(lat2, lng2);
                        map2.setCenter(latlng2);
                    }
                })(marker2, i));
            }
            google.maps.event.addListener(infowindow, 'domready', function() {
               var iwOuter = jQuery('#map-sao-paulo .gm-style-iw');
               iwOuter.css({'margin-top' : '0px','font-weight' : 'bold'});
               var iwBackground = iwOuter.prev();
               iwBackground.children(':nth-child(4)').css({'background-color': '#fff','border': 'solid 1px #aaa'});
               iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground.children(':nth-child(2)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'display: none;'});
            });
            google.maps.event.addListener(infowindow2, 'domready', function() {
               var iwOuter2 = jQuery('#map-jundiai .gm-style-iw');
               iwOuter2.css({'margin-top' : '0px','font-weight' : 'bold'});
               var iwBackground2 = iwOuter2.prev();
               iwBackground2.children(':nth-child(4)').css({'background-color': '#fff','border': 'solid 1px #aaa'});
               iwBackground2.children(':nth-child(1)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground2.children(':nth-child(2)').attr('style', function(i,s){ return s + 'display: none;'});
               iwBackground2.children(':nth-child(3)').attr('style', function(i,s){ return s + 'display: none;'});
            });
            autoCenter();
            autoCenter2();
        }
        // function loadURL(marker) {
        //     return function () {
        //         window.location.href = marker.url;
        //     }
        // }
        function triggerClick(i) {
            google.maps.event.trigger(markers[i], 'click');
            //map.getBounds();
        }
        function triggerClick2(i) {
            google.maps.event.trigger(markers2[i], 'click');
            //map.getBounds();
        }
        function autoCenter() {
            //  Create a new viewpoint bound
            var bounds = new google.maps.LatLngBounds();
            //  Go through each...
            for (var i = 0; i < markers.length; i++){
                bounds.extend(markers[i].position);
            }
            //  Fit these bounds to the map
            map.fitBounds(bounds);
        }
        function autoCenter2() {
            //  Create a new viewpoint bound
            var bounds2 = new google.maps.LatLngBounds();
            //  Go through each...
            for (var i = 0; i < markers2.length; i++){
                bounds2.extend(markers2[i].position);
            }
            //  Fit these bounds to the map
            map2.fitBounds(bounds2);
        }
        /* MAP FUNCTIONS */


    </script> 
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize">
    </script>