我該如何設計這款Google Maps infoWindow？

Question

我有以下的javascript：

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

 
    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]), 
 
      map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
      return function() { 
 
       infowindow.setContent(locations[i][0]); 
 
       infowindow.open(map, marker); 
 
      } 
 
     })(marker, i)); 
 
    } 
 
</script> 
 
<!--End Google Maps Script-->

將會產生如下：http://lexis250.github.io/groupecopley/map/

我想風格我的信息窗口（窗口點擊引腳時彈出），所以他們有一個標題，一個圖像和一個鏈接。我怎麼能這樣做呢？

Answer 1

一個選項： 的標題和描述添加到位置數組：

// address, latitude, longitude, title,  description 
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"], 
    ... 

然後把它在信息窗口從那裏。

var locations = [ 
 
     ["1 Severn", 45.489886, -73.595116, "first title", "description 0<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, fermentum eu venenatis sed, aliquet in tortor. Etiam urna turpis, varius sed cursus vel, pretium eget sapien. Vestibulum ut vehicula nisi, ultricies pretium lectus. Praesent elementum lacus a purus cursus, quis laoreet risus semper. Morbi condimentum pellentesque tortor, eget dictum ligula cursus sit amet. Vestibulum fermentum, tellus non aliquam tristique, ligula neque eleifend nisl, nec condimentum sapien magna id tellus. Mauris commodo at nibh in hendrerit. Nunc lacinia lobortis pellentesque. Curabitur quis tincidunt ligula. Sed vel vestibulum lorem. Aliquam nec porttitor dolor. Suspendisse potenti. Sed et vestibulum ipsum, nec ullamcorper leo. Mauris mollis pellentesque arcu. Etiam et sem dictum augue bibendum pretium. Donec id justo orci."], 
 
     ["16 Grenville", 45.486391, -73.607096, "second title", "description 1"], 
 
     ["17 Winchester", 45.477646, -73.603917, "third title", "description 2"], 
 
     ["19 Winchester", 45.477607, -73.603962, "fourth title", "description 3"], 
 
     ["52 Brookfield", 45.514604, -73.632722, "fifth title", "description 4"], 
 
     ["317 Chemin du Golf", 45.467418, -73.548665, "sixth title", "description 5"], 
 
     ["319 Chemin du Golf", 45.467418, -73.548665, "seventh title", "description 6"], 
 
     ["447 Mt. Stephen", 45.483900, -73.600203, "8th title", "description 7"], 
 
     ["449 Mt. Stephen", 45.483933, -73.600179, "9th title", "description 8"], 
 
     ["603 Lansdowne", 45.484876, -73.609120, "10th title", "description 9"], 
 
     ["649 Belmont", 45.485654, -73.609270, "12th title", "description 10"], 
 
     ["652 Roslyn", 45.484788, -73.611407, "13th title", "description 11"], 
 
     ["1235 Bishop", 45.496458, -73.575373, "14th title", "description 12"], 
 
     ["1355 Scarboro", 45.523431, -73.639453, "15th title", "description 13"], 
 
     ["2184 De Cologne", 45.515823, -73.704550, "16th title", "description 14"], 
 
     ["2302 Brookfield", 45.514738, -73.632688, "17th title", "description 15"], 
 
     ["3013 De Breslay", 45.492288, -73.590195, "18th title", "description 16"], 
 
     ["3019 De Breslay", 45.492092, -73.590437, "19th title", "description 17"], 
 
     ["3021 Jean Girard", 45.493183, -73.590212, "20th title", "description 18"], 
 
     ["3025 De Breslay", 45.492075, -73.590771, "21st title", "description 19"], 
 
     ["4389 Decarie", 45.480705, -73.620274, "22nd title", "description 20"] 
 
    ]; 
 

 
    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("<h3 class='title'>" + locations[i][3] + "</h3><div style='text-align: center'>" + locations[i][0] + "</div><div class='description'>" + locations[i][4]+"</div"); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    }

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h3 { 
 
    text-align: center; 
 
} 
 
.title { 
 
    color: blue; 
 
    } 
 
.description { 
 
    color: green; 
 
    font-face: "Courier"; 
 
    }

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="map"></div>

Answer 2

不知道你需要什麼樣的風格

但是你可以在這行代碼中的添加HTML標籤，就像這樣： 用類名，然後你可以格式化你的風格在CSS文件。

請在這裏看到jsfiddle。希望這可以幫助。

... 
    infowindow.setContent('<h4 class="modern">'+locations[i][0]+'</h4>');