Локальный объект изображения не получает правильную инициализацию в Javascript

Question

У меня возникает проблема, когда локальный объект в цикле For не инициализируется для каждой итерации в Javascript.

Ниже код работает отлично:

function initialize() { 
    var mapOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.9, 151.2) 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

    setMarkers(map, beaches); 
} 

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['Coogee Beach', -33.923036, 151.259052, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['Cronulla Beach', -34.028249, 151.157507, 3, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['Maroubra Beach', -33.950198, 151.259302, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'] 
]; 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
     var beach = locations[i]; 

     var image = { 
      url: beach[4], 
      size: new google.maps.Size(20, 32), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(0, 32) 
     }; 

     var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: beach[0], 
      zIndex: beach[3] 
     }); 
    } 
} 

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

Однако, если мой первый массив становится похожим на это, все флаги перестает отображать .:

['Bondi Beach', -33.890542, 151.274856, 4, '']; 

Почему Map Marker не получает инициализируется каждый раз? Есть что-то в Google Картах, которые я здесь отсутствует?

JSFiddle ссылку на образец кода: http://jsfiddle.net/anujagg/Lrkvu4mu/25/

Спасибо.

Answer 1

Ошибка google.maps.Icon с URL-адресом ''.

var image = { 
     url: beach[4], 
     size: new google.maps.Size(20, 32), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(0, 32) 
    }; 

Существует Javascript ошибка генерируется в этом случае:

Uncaught TypeError: Не удается прочитать свойство «дх» неопределенной

Изменить код перейти в нуль для изображения в этом случае:

if (beach[4] != '') { 
    var image = { 
     url: beach[4], 
     size: new google.maps.Size(20, 32), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(0, 32) 
    }; 
} else { 
    var image = null; 
} 

working fiddle

код s nippet:

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.9, 151.2) 
 
    } 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    setMarkers(map, beaches); 
 
} 
 

 
var beaches = [ 
 
    ['Bondi Beach', -33.890542, 151.274856, 4, ''], 
 
    ['Coogee Beach', -33.923036, 151.259052, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
 
    ['Cronulla Beach', -34.028249, 151.157507, 3, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
 
    ['Maroubra Beach', -33.950198, 151.259302, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'] 
 
]; 
 

 
function setMarkers(map, locations) { 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var beach = locations[i]; 
 
    if (beach[4] != '') { 
 
     var image = { 
 
     url: beach[4], 
 
     size: new google.maps.Size(20, 32), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(0, 32) 
 
     }; 
 
    } else { 
 
     var image = null; 
 
    } 
 

 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     icon: image, 
 
     title: beach[0], 
 
     zIndex: beach[3] 
 
    }); 
 
    } 
 
} 
 

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

 html, 
 
     body, 
 
     #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     }

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>