Добавление пользовательского значка маркера карты в API карт Google

Question

Я делал это десятки раз, но сегодня кажется, что он не хочет работать. У меня есть следующий код, из которого вывод карты не отображается?

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script> 
<script> 
    function initialize() { 
     var mapCanvas = document.getElementById('map'); 
     var mapOptions = { 
      center: new google.maps.LatLng(55.555555, -2.323702), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions) 
    } 

    var image = 'http://www.clker.com/cliparts/I/l/L/S/W/9/map-marker-hi.png'; 
    var beachMarker = new google.maps.Marker({ 
     position: { 
      lat: 55.555555, 
      lng: -2.323702 
     }, 
     map: map, 
     icon: image 
    }); 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

Решение

function initialize() { 
    var mapCanvas = document.getElementById('map'); 
    var mapOptions = { 
     center: new google.maps.LatLng(55.555555, -2.323702), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(mapCanvas, mapOptions) 

    var image = 'http://www.clker.com/cliparts/I/l/L/S/W/9/map-marker-hi.png'; 
    var beachMarker = new google.maps.Marker({ 
     position: {lat: 55.555555, lng: -2.323702}, 
     map: map, 
     icon: image 
    }); 

    } 

Answer 2

Он смотрит на меня, как вы создаете маркер, прежде чем запустить initialize() функцию, которая используется для создания карты. Либо включите создание маркера в свою initialize() функцию, либо измените порядок ее создания.

Answer 3

С your code as posted, я получаю ошибку яваскрипта в консоли: Uncaught ReferenceError: map is not defined, так как переменная map является локальной по отношению к функции инициализации и код маркера находится за пределами этой функции. Переместите создание маркера внутри функции initialize. (маркер также немного большой, поэтому код ниже масштабирует его до более разумного размера).

function initialize() { 
 
    var mapCanvas = document.getElementById('map'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(55.555555, -2.323702), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 

 
    // move inside initialize function 
 
    var image = 'http://www.clker.com/cliparts/I/l/L/S/W/9/map-marker-hi.png'; 
 
    var beachMarker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.555555, 
 
     lng: -2.323702 
 
    }, 
 
    map: map, 
 
    icon: { 
 
     url: image, 
 
     scaledSize: new google.maps.Size(20, 32) 
 
    } 
 
    }); 
 
} // end of initialize 
 
google.maps.event.addDomListener(window, 'load', initialize);

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

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