0

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?

J.K
  • 41
  • 9

2 Answers2

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

cdm
  • 1,360
  • 11
  • 18
0

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>
Community
  • 1
  • 1
geocodezip
  • 158,664
  • 13
  • 220
  • 245