Google Maps marker icons disappeared - google-maps-api-3

Question

I have been working on a custom Google map. A few days ago I noticed that marker icons (loaded from a .png) do not appear anymore. The same issue applies to older files with this map. The markers are called like this:
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]
});
Here's also a fiddle with more complete code, which used to work: http://jsfiddle.net/geocodezip/4skyrs58/1/
Does anyone know of any deprecations, or necessary updates, that may be the cause?

Answer 1

In the attached fiddle there is a problem with InfoBox. Google maps sources have been moved from svn to git, as stated here: https://code.google.com/p/google-maps-utility-library-v3/. And it looks like InfoBox is not included. You can download it here: https://github.com/mikejoyceio/google-maps-infobox/blob/master/infobox.js

Answer 2

The InfoBox library on google code is no longer available in a form that can be linked to. That library has been moved to GitHub.
See this related question: Google Maps API V3 Infobox.js removed
updated fiddle
code snippet linking to the 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>