Пользовательские значки не загружаются на карте google

Question

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

Вот мой пример кода

function initMap() { 
    // specify where the map is centered 
    var myLatLng = {lat: 37.77493, lng: -122.419416}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    center: myLatLng, 
    zoom: 12 
    }); 

    $.get("/data", function(data) { 
    console.log(data); 
    placeMarkers(data, map); 
    }); 
} 

// Create a marker 
function placeMarkers(data, map){ 
    var icon = { 
    url:'http://www.arclightbrewing.com/files/Food%20Truck%20Court.png', 
    size: new google.maps.Size(20, 32), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(0, 0) 
    }; 

    var shape = { 
    coord: [16, 0, 0, 16, 16, 45, 32 , 16], 
    type: 'poly' 
    }; 

    var locations = data["locations"]; 
    for (i = 0; i < locations.length; i++) { 
    var loc = locations[i] 
    , lat = loc["latitude"] 
    , lng = loc["longitude"]; 

    if (lat && lng){ 
     var marker = new google.maps.Marker({ 
     position: {lat:parseFloat(lat), lng:parseFloat(lng)}, 
     map:map, 
     icon:icon, 
     shape:shape 
     }); 
    } 
    } 
}` 

Answer 1

Ваше определение значок не является правильным. Это работает для меня:

var icon = { 
    url: 'http://www.arclightbrewing.com/files/Food%20Truck%20Court.png', 
    size: new google.maps.Size(488,349),  // original image size 
    scaledSize: new google.maps.Size(64, 40), // desired image size 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(32, 40) 
}; 

из the documentation

scaledSize | Тип: Размер

Размер всего изображения после масштабирования, если таковой имеется. Используйте это свойство, чтобы растянуть/сжать изображение или спрайт.

(вы не должны сказать ему, фактический размер, хотя вы можете)

proof of concept fiddle

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

var map; 
 

 
function initMap() { 
 
    // specify where the map is centered 
 
    var myLatLng = { 
 
    lat: 37.77493, 
 
    lng: -122.419416 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: myLatLng, 
 
    zoom: 12 
 
    }); 
 

 
    // $.get("/data", function(data) { 
 
    console.log(data); 
 
    placeMarkers(data, map); 
 
    // }); 
 
} 
 

 
// Create a marker 
 
function placeMarkers(data, map) { 
 
    var icon = { 
 
    url: 'http://www.arclightbrewing.com/files/Food%20Truck%20Court.png', 
 
    scaledSize: new google.maps.Size(64, 40), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(32, 40) 
 
    }; 
 

 
    var shape = { 
 
    coord: [16, 0, 0, 16, 16, 45, 32, 16], 
 
    type: 'poly' 
 
    }; 
 

 
    var locations = data["locations"]; 
 
    for (i = 0; i < locations.length; i++) { 
 
    var loc = locations[i], 
 
     lat = loc["latitude"], 
 
     lng = loc["longitude"]; 
 

 
    if (lat && lng) { 
 
     var marker = new google.maps.Marker({ 
 
     position: { 
 
      lat: parseFloat(lat), 
 
      lng: parseFloat(lng) 
 
     }, 
 
     map: map, 
 
     icon: icon, 
 
     shape: shape 
 
     }); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
var data = { 
 
    locations: [{ 
 
    latitude: 37.7598648, 
 
    longitude: -122.4147977, 
 
    name: "Mission District, San Francisco, CA, USA" 
 
    }, { 
 
    latitude: 37.7591221, 
 
    longitude: -122.3895378, 
 
    name: "Dogpatch, San Francisco, CA, USA" 
 
    }] 
 
};

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>