Googleマップのマーカーアイコンが消えた

Question

私はカスタムGoogleマップで作業しています。数日前に、マーカーアイコン（.pngから読み込まれた）がもう表示されないことに気付きました。この問題は、このマップの古いファイルにも適用されます。マーカーは、このように呼ばれています。

var locations = [ 
    ['Location1', 46.096678, 7.2281081, 'pin.png', 1], 
    ['Location2', 46.0230159, 7.7428676, 'pin.png', 2], 
    ['Location3', 46.1125509, 7.919948, 'pin.png', 3], 
]; 

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, 
icon: locations[i][3] 
}); 

ここでも動作するように使用されるより完全なコード、とフィドルです：http://jsfiddle.net/geocodezip/4skyrs58/1/

誰が原因である可能性があります任意の非推奨、または必要な更新、知っていますか？

Answer 1

GoogleのInfoBoxライブラリは、リンクできる形式ではご利用いただけません。そのライブラリはGitHubに移動されました。

この関連の質問を参照してください：githubのバージョンへのリンクGoogle Maps API V3 Infobox.js removed

updated fiddle

コードスニペット：

var map; 
 
var markers = []; 
 
var content = []; 
 
var map = new google.maps.LatLng(46.2171749, 7.5984075); 
 
var bounds = new google.maps.LatLngBounds(); 
 

 
function initialize() { 
 

 
    var mapOptions = { 
 
    zoom: 10, 
 
    center: map 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var locations = [ 
 
    ['Location1', 46.096678, 7.2281081, 'pin.png', 1], 
 
    ['Location2', 46.0230159, 7.7428676, 'pin.png', 2], 
 
    ['Location3', 46.1125509, 7.919948, 'pin.png', 3], 
 
    ]; 
 

 
    var infobox = new InfoBox({ 
 
    content: document.getElementById("infobox"), 
 
    disableAutoPan: false, 
 
    maxWidth: 800, 
 
    pixelOffset: new google.maps.Size(-400, 10), 
 
    zIndex: null, 
 
    closeBoxMargin: "12px 12px 2px 2px", 
 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
 
    infoBoxClearance: new google.maps.Size(0, 0), 
 
    }); 
 

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

 
    markers.push(marker); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infobox.open(map, marker); 
 
     infobox.setContent(document.getElementById(locations[i][0]).cloneNode(true)); 
 
     map.panTo(marker.getPosition(0, 427)); 
 
     map.panBy(0, 400); 
 
     } 
 
    })(marker, i)); 
 
    bounds.extend(marker.getPosition()); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

 
function myClick(id) { 
 
    google.maps.event.trigger(markers[id], 'click'); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.infowindow { 
 
    border: 1px solid black; 
 
    margin-top: 8px; 
 
    background: white; 
 
    padding: 5px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> 
 
<div id="map-canvas"></div> 
 
<div id="Location1"> 
 
    <div class="infobox_wrapper"> 
 
    <div class="infowindow"> 
 
     <div class="infobox_title_wrapper"> 
 
     <div class="info_icon"> 
 
      <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" /> 
 
     </div> 
 
     <div class="info_title"> 
 
      <p>##</p> 
 
     </div> 
 
     <div class="info_place"> 
 
      <p>##</p> 
 
     </div> 
 
     </div> 
 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193571.43828905202!2d-74.11808638273646!3d40.7058253631455!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1461436300347" 
 
     width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
     <p class="txt">##</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="Location2"> 
 
    <div class="infobox_wrapper"> 
 
    <div class="infowindow"> 
 
     <div class="infobox_title_wrapper"> 
 
     <div class="info_icon"> 
 
      <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" /> 
 
     </div> 
 
     <div class="info_title"> 
 
      <p>##</p> 
 
     </div> 
 
     <div class="info_place"> 
 
      <p>##</p> 
 
     </div> 
 
     </div> 
 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d88704.87577364442!2d7.671905434077621!3d45.990682827318246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f35a2292ee5cd%3A0x400ff8840196f70!2s3920+Zermatt%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437058426" 
 
     width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
     <p class="txt">##</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="Location3"> 
 
    <div class="infobox_wrapper"> 
 
    <div class="infowindow"> 
 
     <div class="infobox_title_wrapper"> 
 
     <div class="info_icon"> 
 
      <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" /> 
 
     </div> 
 
     <div class="info_title"> 
 
      <p>##</p> 
 
     </div> 
 
     <div class="info_place"> 
 
      <p>##</p> 
 
     </div> 
 
     </div> 
 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44233.88369647231!2d7.936860760323751!3d46.13844402760392!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f45103f606a5d%3A0xb47592074f679662!2s3910+Saas-Grund%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437405679" 
 
     width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
     <p class="txt">##</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

添付ファイルでインフォボックスに問題があります。 Googleマップのソースは、ここで述べたようにsvnからgitに移動しました：https://code.google.com/p/google-maps-utility-library-v3/そして、それはインフォボックスが含まれていないように見えます。 https://github.com/mikejoyceio/google-maps-infobox/blob/master/infobox.js