將圖像添加到多個Google地圖信息導入

Question

因此，作爲任務的一部分，我們必須使用Google Maps API設計地圖，該地圖需要使用多個信息窗口和自定義標記。我已經管理了前兩個，但我似乎正在努力與圖像？我可以簡單地將圖像添加到數組中，如果是這樣，我該如何正確格式化？

這裏是我當前的代碼

//Beginning of Function 
function initialise() { 

     //Get mapArea in HTML, create map based around latlong 
     var map = new google.maps.Map(document.getElementById('mapArea'), { 
      zoom: 16, 
      center: new google.maps.LatLng(53.470639, -2.238996), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     //add array of locations and markers 
     var locations = [ 
      ['Geoffrey Manton Building', 53.469272, -2.237179,'http://labs.google.com/ridefinder/images/mm_20_purple.png'], 
      ['All Saints Building', 53.471086, -2.238541,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
      ['Business and Law Schools', 53.470575, -2.239673,'http://labs.google.com/ridefinder/images/mm_20_green.png'], 
      ['John Dalton', 53.471964, -2.240392,'http://labs.google.com/ridefinder/images/mm_20_blue.png'], 
     ]; 

     //declare variable marker as i 
     var marker, i; 

     //Declare new infowindow for locations 
     var infowindow = new google.maps.InfoWindow(); 

     //add marker to each location 
     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, 
       icon: locations[i][3] 
      }); 

      //Create marker functionality, allow infowindow opening 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialise); 

Answer 1

您可以將圖像添加到您的陣列。那很好。

var locations = [ 
    ['Geoffrey Manton Building', 53.469272, -2.237179, 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 'http://placehold.it/100x100'], 
    ['All Saints Building', 53.471086, -2.238541, 'http://labs.google.com/ridefinder/images/mm_20_red.png', 'http://placehold.it/100x200'], 
    ['Business and Law Schools', 53.470575, -2.239673, 'http://labs.google.com/ridefinder/images/mm_20_green.png', 'http://placehold.it/100x50'], 
    ['John Dalton', 53.471964, -2.240392, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 'http://placehold.it/200x200']]; 

然後建立自己的信息窗口的內容與任何HTML標記和信息，你從你的陣列需要：

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

     var html = '<h4>' + locations[i][0] + '</h4>'; 
     html += '<img src="' + locations[i][4] + '" />'; 

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

JSFiddle demo

注意，我從initialise改變你的主函數名到initialize，然後將元素標識從mapArea映射到map-canvas。