Google Maps Marker-Symbole verschwunden

Question

Ich habe an einer benutzerdefinierten Google-Karte gearbeitet. Vor ein paar Tagen ist mir aufgefallen, dass Markersymbole (geladen von einem .png) nicht mehr erscheinen. Dasselbe gilt für ältere Dateien mit dieser Karte. Der Marker wird wie folgt aufgerufen:

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

Hier ist auch eine Geige mit vollständigeren Code, der Arbeit verwendet: http://jsfiddle.net/geocodezip/4skyrs58/1/

Kennt jemand von irgendwelchen Veraltete oder erforderliches Updates, dass die Ursache sein?

Answer 1

Die InfoBox Bibliothek auf Google-Code ist nicht mehr verfügbar in einer Form, die verknüpft werden kann. Diese Bibliothek wurde zu GitHub verschoben.

diese Frage im Zusammenhang Siehe: Google Maps API V3 Infobox.js removed

updated fiddle

Code-Schnipsel Anbindung an die Github Version:

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

In der beigefügten Fiddle gibt es ein Problem mit InfoBox. Google Maps-Quellen wurden von svn in git verschoben, wie hier angegeben: https://code.google.com/p/google-maps-utility-library-v3/. Und es sieht so aus, als wäre die InfoBox nicht enthalten. Sie können es hier herunterladen: https://github.com/mikejoyceio/google-maps-infobox/blob/master/infobox.js