缩放 +- 按钮上方的 Google 地图信息窗口弹出窗口？

Question

在https://jsfiddle.net/2tcubr9a/中，如何使信息窗口出现在 + - 缩放按钮的顶部而不是它们的下方？

我试过了：

infowindow.setZIndex(99999);

但这没有任何区别。

截屏：

脚本：

function initMap() {

         var map = new google.maps.Map(document.getElementById('map'), {

            center: {lat: 46.613317, lng: 2.349830},

            zoom: 9

         });

setMarkers(map);

      }

var points = [

    ['Point 1', 'adresse 1 ', 46.613317, 2.249830],

    ['Point 2', 'adresse 2 ', 46.713317, 2.249830],

    ['Point 3', 'adresse 3 ', 46.613317, 2.349830],

    ['Point 4', 'adresse 4 ', 46.713317, 2.449830],

    ['Point 5', 'adresse 5 ', 46.613317, 2.449830],

    ['Point 1', 'adresse 1 ', 46.413317, 2.249830],

    ['Point 2', 'adresse 2 ', 46.513317, 2.249830],

    ['Point 3', 'adresse 3 ', 46.513317, 2.349830],

    ['Point 4', 'adresse 4 ', 46.413317, 2.449830],

    ['Point 5', 'adresse 5 ', 46.513317, 2.449830],

];

var markersC = [];

function setMarkers(map) {

 var infowindow = new google.maps.InfoWindow();

    for (var i = 0; i < points.length; i++) {

        var point = points[i];

        var marker = new google.maps.Marker({

                                                position: {lat: point[2], lng: point[3]},

                                                map: map,

                                                title: point[0],

                                            });

markersC.push(marker);

        var contentString = '<div class="marker-infowindow">' +

                            '<h2>'+point[0]+'</h1>'+

                            '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';

    }

如果有人以前做过或者可以编辑 JSFiddle 使信息窗口弹出出现在缩放按钮上，我们将不胜感激。

Answer 1

这个 jsfiddle 为信息窗口创建一个自定义 div：http://jsfiddle.net/b170s71d/3/var geocoder;var map;var overlay;function initialize() {&nbsp; var map = new google.maps.Map(&nbsp; &nbsp; document.getElementById("map_canvas"), {&nbsp; &nbsp; &nbsp; center: new google.maps.LatLng(37.4419, -122.1419),&nbsp; &nbsp; &nbsp; zoom: 13,&nbsp; &nbsp; &nbsp; mapTypeId: google.maps.MapTypeId.ROADMAP&nbsp; &nbsp; });&nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; map: map,&nbsp; &nbsp; draggable: true,&nbsp; &nbsp; position: map.getCenter()&nbsp; });&nbsp; google.maps.event.addListener(map, 'projection_changed', function() {&nbsp; &nbsp; overlay = new google.maps.OverlayView();&nbsp; &nbsp; overlay.draw = function() {};&nbsp; &nbsp; overlay.setMap(map);&nbsp; &nbsp; var info = document.getElementById('myinfo');&nbsp; &nbsp; google.maps.event.addListener(marker, 'click', function(e) {&nbsp; &nbsp; &nbsp; var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng);&nbsp; &nbsp; &nbsp; var point2 = overlay.getProjection().fromLatLngToContainerPixel(e.latLng);&nbsp; &nbsp; &nbsp; document.getElementById('info').innerHTML = "click:" + e.latLng.toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;&nbsp; &nbsp; &nbsp; info.style.left = (point2.x - 100) + 'px';&nbsp; &nbsp; &nbsp; info.style.top = (point2.y - 60) + 'px';&nbsp; &nbsp; &nbsp; info.style.display = 'block';&nbsp; &nbsp; });&nbsp; &nbsp; google.maps.event.addListener(map, 'center_changed', function(e) {&nbsp; &nbsp; &nbsp; var point = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());&nbsp; &nbsp; &nbsp; var point2 = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());&nbsp; &nbsp; &nbsp; document.getElementById('info').innerHTML = "marker:" + marker.getPosition().toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;&nbsp; &nbsp; &nbsp; info.style.left = (point2.x - 100) + 'px';&nbsp; &nbsp; &nbsp; info.style.top = (point2.y - 60) + 'px';&nbsp; &nbsp; &nbsp; info.style.display = 'block';&nbsp; &nbsp; });&nbsp; &nbsp; google.maps.event.addListener(marker, 'drag', function(e) {&nbsp; &nbsp; &nbsp; var point = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());&nbsp; &nbsp; &nbsp; var point2 = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());&nbsp; &nbsp; &nbsp; document.getElementById('info').innerHTML = "marker:" + marker.getPosition().toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;&nbsp; &nbsp; &nbsp; info.style.left = (point2.x - 100) + 'px';&nbsp; &nbsp; &nbsp; info.style.top = (point2.y - 60) + 'px';&nbsp; &nbsp; &nbsp; info.style.display = 'block';&nbsp; &nbsp; });&nbsp; });}google.maps.event.addDomListener(window, "load", initialize);