定製谷歌地圖javascript api 3信息窗口

Question

我有三件事情我想對infowindow做。

1. 如何將我的信息窗口中的「鏈接」文本更改爲實際鏈接。
2. 如何將圖片添加到每個信息窗口
3. 我怎樣才能調整信息窗口

這裏的大小是我的javascript：

<!--Google Maps Script--> 
 
<script type="text/javascript"> 
 
    function initGmap() { 
 

 
     var locations = [ 
 
      ["1 Severn", 45.489886, -73.595116, "link"], 
 
      ["16 Grenville", 45.486391, -73.607096, "link"], 
 
      ["17 Winchester", 45.477646, -73.603917, "link"], 
 
      ["19 Winchester", 45.477607, -73.603962, "link"], 
 
      ["52 Brookfield", 45.514604, -73.632722, "link"], 
 
      ["317 Chemin du Golf", 45.467418, -73.548665, "link"], 
 
      ["319 Chemin du Golf", 45.467418, -73.548665, "link"], 
 
      ["447 Mt. Stephen", 45.483900, -73.600203, "link"], 
 
      ["449 Mt. Stephen", 45.483933, -73.600179, "link"], 
 
      ["603 Lansdowne", 45.484876, -73.609120, "link"], 
 
      ["649 Belmont", 45.485654, -73.609270, "link"], 
 
      ["652 Roslyn", 45.484788, -73.611407, "link"], 
 
      ["1235 Bishop", 45.496458, -73.575373, "link"], 
 
      ["1355 Scarboro", 45.523431, -73.639453, "link"], 
 
      ["2184 De Cologne", 45.515823, -73.704550, "link"], 
 
      ["2302 Brookfield", 45.514738, -73.632688, "link"], 
 
      ["3013 De Breslay", 45.492288, -73.590195, "link"], 
 
      ["3019 De Breslay", 45.492092, -73.590437, "link"], 
 
      ["3021 Jean Girard", 45.493183, -73.590212, "link"], 
 
      ["3025 De Breslay", 45.492075, -73.590771, "link"], 
 
      ["4389 Decarie", 45.480705, -73.620274, "link"] 
 
     ]; 
 

 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 12, 
 
      center: new google.maps.LatLng(45.484876, -73.609120), 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
      scrollwheel: false 
 
     }); 
 

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

 
     var marker, i; 
 

 
     for (i = 0; i < locations.length; i++) { 
 
      marker = new google.maps.Marker({ 
 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
       title: locations[i][0], 
 
       map: map 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
       return function() { 
 
        infowindow.setContent 
 
        ("<div class='map-address'>" + locations[i][0] + "</div> <div class='map-link'>" + 
 
        locations[i][3] + "</div>"); 
 
        infowindow.open(map, marker); 
 
       } 
 
      })(marker, i)); 
 
     } 
 
    } 
 
</script> 
 

 
<script async="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYbVG7Y7MqGw-OWkH2HW0RQlHtMO_bfoc&callback=initGmap"></script> 
 
<!--End Google Maps Script-->

Answer 1

讓我們假設你的圖片路徑也是你locations陣列象下面這樣：

var locations = [ 
    ["1 Severn", 45.489886, -73.595116, "link", "path/to/image.jpg"], 
    ["16 Grenville", 45.486391, -73.607096, "link", "path/to/image.jpg"] 
]; 

現在你可以做你的標記點擊下面的聽衆：

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 

     var html = ''; 

     // Create a container for the infowindow content 
     html += '<div class="infowindow-content">'; 

     // Add a link 
     html += '<a href="' + locations[i][3] + '">Text of your link</a>'; 

     // Add an image 
     html += '<img src="' + locations[i][4] + '" />'; 

     // Close the container 
     html += '</div>'; 

     infowindow.setContent(html); 
     infowindow.open(map, marker); 
    } 
})(marker, i)); 

現在你有一個類的容器.infowindow-content您可以使用CSS進行設計。例如：

.infowindow-content { 

    width: 300px; 
    padding: 10px; 
    font-size: 10px; 
} 

編輯：工作小提琴低於

JSFiddle demo

Answer 2

在這部分代碼，

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 
     infowindow.setContent("<div class='map-address'>" + locations[i][0] + "</div> <div class='map-link'>" + locations[i][3] + "</div>"); 
     infowindow.open(map, marker); 
    } 
})(marker, i)); 

專門對您的info.setContent（），也許你可以改變

"<div class='map-link'>" + locations[i][3] + "</div>" 

是

"<a href='"+ locations[i][3] +"' class='map-link'> Some text </a>" 

還可以追加到它基本的HTML

"<img src='"+ someImageURL +"' alt="AnImage">" 

希望這可以幫助，如果你有任何其他問題讓我知道;）