如何在自定義Google地圖上顯示白色彈出框？

我目前有一個地方爲我正在處理的自定義地圖的數組。我一直在嘗試，但無法弄清楚如何在標記上添加「點擊」彈出框。我希望白色方框顯示名稱並有一個選項，以便一個人可以選擇'獲取到此處的路線'。有誰知道我可以用多一個標記來達到這個目的嗎？如何在自定義Google地圖上顯示白色彈出框？

<!DOCTYPE html> 
<head> 

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 50% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    var map; 
    var marker 
    function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
var restaurants = new Array(); 
restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    var i = 0; 
for (i <0; i < restaurants.length;i++){ 
    var marker = new google.maps.Marker({ 
     position: restaurants[i], 
    map:map, 
     title:"Testing!" 
    }); 
    popupDirections(marker); 
    } 
} 
function popupDirections(marker) { 
    var infowindow = new google.maps.InfoWindow(
     { content: "tests: " 
     }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 
</body> 
</html>

來源

2010-09-10 Kevin

您正在討論的彈出框稱爲Google地圖語言的信息窗口。

GEvent.addListener(marker, "click", function() { 
marker.openInfoWindowHtml("your contents"); 
});

上述代碼將點擊事件與標記綁定在一起，並用指定的文本打開信息窗口。這裏標記是標記對象。

希望它有幫助。

來源

2010-09-10 12:51:33

這樣做的方法是創建一個全局infowindow，然後再次重複使用它，這樣infowindow就會移動到每個標記，並且可以使用setContent方法更改信息窗口的內容。閱讀here，並從api參考站點訪問Google演示。我有，當我拍圖我的網站同樣的問題，

下面的代碼應該工作：

<script type="text/javascript"> 
var map; 
var marker; 
var infowindow; //Global infowindow created 
function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
    var restaurants = new Array(); 
    restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    infowindow = new google.maps.InfoWindow({ //infowindow options set 
       maxWidth: 355 
    }); 

    var i = 0; 
    for (i <0; i < restaurants.length;i++){ 
      marker = new google.maps.Marker({ 
         position: restaurants[i], 
         map:map, 
         title:"Testing!" 
       }); 
      popupDirections(marker); 
     } 
} 

function popupDirections(marker) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
} 
</script>

如果你想單獨的內容每個標記（我假設你會）你可以通過一些內容導入到popupDirections（）函數中，用內容「html」的字符串修改：

function popupDirections(marker, html) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
}

來源

2010-09-10 18:48:43 adustduke

如何在自定義Google地圖上顯示白色彈出框？

回答

相關問題