顯示信息窗口谷歌地圖

我的HTML：顯示信息窗口谷歌地圖

<div id="map_canvas" style="width: 625px; height: 500px;"></div>

我的JQuery：

var infowindow = null; 
    $(document).ready(function() { initialize(); }); 

    function initialize() { 

     var centerMap = new google.maps.LatLng(40.68194, -73.94439); 

     var myOptions = { 
      zoom: 13, 
      center: centerMap, 
      scaleControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     setMarkers(map, sites); 
     infowindow = new google.maps.InfoWindow({ 
       content: "loading...", maxWidth: 150 
      }); 

     //var bikeLayer = new google.maps.BicyclingLayer(); 
     //bikeLayer.setMap(map); 
    } 

    function setMarkers(map, markers) { 

     for (var i = 0; i < markers.length; i++) { 
      var sites = markers[i]; 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       title: sites[0], 
       zIndex: sites[3], 
       html: sites[4] 
      }); 

      var contentString = "Some content"; 

      google.maps.event.addListener(marker, "click", function() { 
       //alert(this.html); 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
    }

如何能夠做到，

要顯示的網站[0 ]默認情況下在頁面加載時使用infobubble。
在地圖上爲每個標記都有不同的標記。

來源

2013-05-30 Si8

默認情況下在頁面加載時顯示網站[0]信息。

infowindow.open(map, site[0]);

要具有不同的標記物每個在地圖上。 假設你的意思是不同的標記的圖像，你既可以將它們設置在創建標記或簡單地呼叫site[i].setIcon('newImage.png')，後來

裁判：Google Maps API v3: How do I dynamically change the marker icon?

來源

2013-05-30 19:40:39 varun

感謝您的反饋意見。我在哪裏將infowindow.open（）放在我的腳本中？ – Si8

頁面加載後，確保infowindow和網站變量可以訪問 – varun

initialize（）是一個單獨的函數，所以你的代碼將不起作用，因爲它給了我一個錯誤：/ – Si8

使用自定義圖標，一個簡單的圖標，只需添加您的網站數組的圖標網址，在標記定義中使用它。
```
 icon: sites[5] 
```

保持引用標記：

// in the global scope 
var gmarkers = []; 



for (var i = 0; i < markers.length; i++) { 
    var sites = markers[i]; 
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
    var marker = new google.maps.Marker({ 
     position: siteLatLng, 
     map: map, 
     title: sites[0], 
     zIndex: sites[3], 
     html: sites[4], 
     icon: sites[5] 
    }); 
    gmarkers.push(marker); 
    var contentString = "Some content"; 

    google.maps.event.addListener(marker, "click", function() { 
     //alert(this.html); 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
    });

然後點擊一號標記（這將打開信息窗口）：

google.maps.event.trigger（gmarkers [0]，「點擊」）;

working example

來源

2013-05-30 20:04:35 geocodezip

顯示信息窗口谷歌地圖

回答

相關問題