Значок пользовательского значка API Карт Google не отображает

Новое в кодировании, поэтому извиняемся заранее ... Я хочу добавить на мою карту собственные маркеры значков (несколько), но проблема с отображением хотя бы одного (сама карта показывает, хотя).Значок пользовательского значка API Карт Google не отображает

Что не так с моим кодом в его нынешнем виде? (ниже):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>TEST</title> 
    <script src="http://maps.googleapis.com/maps/api/js?key=TEST (I have a valid key here)" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 700px; height: 500px;"></div> 

    <script type="text/javascript"> 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 11, 
     center: new google.maps.LatLng(53.480782, -2.2445527), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
    var marker = new google.maps.Marker({ 
    position: {lat: 53.480782, lng: -2.2445527}, 
    title:"TEST", 
    map: map, 
    icon: image 
    }); 

    marker.setMap(map); 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</body> 
</html>

источник

2016-03-12 Ben

Вы не функцию инициализации. – geocodezip

У вас нет функции инициализации, поэтому ваш код выполняется до отображения DOM. Посмотрите на консоль javascript, вы увидите ошибку Uncaught TypeError: Cannot read property 'offsetWidth' of null, если вы ищете SO для этого, вы обнаружите, что это связано с тем, что <div id="map"></div> не отображается при запуске кода карты (связанный с этим вопрос: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null).

working fiddle

фрагмент кода:

function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 11, 
 
    center: new google.maps.LatLng(53.480782, -2.2445527), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 53.480782, 
 
     lng: -2.2445527 
 
    }, 
 
    title: "TEST", 
 
    map: map, 
 
    icon: image 
 
    }); 
 

 
    marker.setMap(map); 
 
} 
 
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>

источник

2016-03-12 18:44:10 geocodezip

Фантастический - пришлось немного поработать из-за моей собственной нообильности, но это отсортировало его - спасибо большое! – Ben

Значок пользовательского значка API Карт Google не отображает

ответ

Смежные вопросы