Salve a tutti,
ho creato una mappa google multi Marker e funziona correttamente.
Quando provo ad inserire le icone personalizzate mi da errore.
Non riesco a capire dove possa esserci l'errore. I percorsi delle icone sono giusti perchè non li richiama?
ho creato una mappa google multi Marker e funziona correttamente.
Quando provo ad inserire le icone personalizzate mi da errore.
Non riesco a capire dove possa esserci l'errore. I percorsi delle icone sono giusti perchè non li richiama?
Codice:
<!DOCTYPE html>
<html>
<head>
<style>
/* <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
var map;
var InforObj = [];
var centerCords = {
lat: -25.344,
lng: 131.036
};
var iconBase =
'templates/platinum/pages/openmaps/images/';
var icons = {
pizza: {
icon: iconBase + 'icon-pizza.png'
},
pub: {
icon: iconBase + 'icon-pub.png'
},
chef: {
icon: iconBase + 'icon-chef.png'
},
sushi: {
icon: iconBase + 'icon-sushi.png'
},
cart: {
icon: iconBase + 'icon-cart.png'
},
standard: {
icon: iconBase + 'marker-red.png'
},
coffee: {
icon: iconBase + 'icon-coffee.png'
}
};
var markersOnMap = [{
placeName: "Australia (Uluru)",
LatLng: [{
lat: -25.344,
lng: 131.036,
type: 'pizza'
}]
},
{
placeName: "Australia (Melbourne)",
LatLng: [{
lat: -37.852086,
lng: 504.985963,
type: 'pizza'
}]
},
{
placeName: "Australia (Canberra)",
LatLng: [{
lat: -35.299085,
lng: 509.109615,
type: 'pizza'
}]
},
{
placeName: "Australia (Gold Coast)",
LatLng: [{
lat: -28.013044,
lng: 513.425586,
type: 'pizza'
}]
},
{
placeName: "<h1>Australia (Perth)</h1><br><p>Test indirizzo<br>test immagine</p>",
LatLng: [{
lat: -31.951994,
lng: 475.858081,
type: 'pizza'
}]
}
];
window.onload = function () {
initMap();
};
function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = markersOnMap[i].placeName ;
const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
icon: icons[markersOnMap[i].type].icon,
map: map
});
const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
// marker.addListener('mouseover', function () {
// closeOtherInfo();
// infowindow.open(marker.get('map'), marker);
// InforObj[0] = infowindow;
// });
// marker.addListener('mouseout', function () {
// closeOtherInfo();
// infowindow.close();
// InforObj[0] = infowindow;
// });
}
}
function closeOtherInfo() {
if (InforObj.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
InforObj[0].set("marker", null);
/* and close it */
InforObj[0].close();
/* blank the array */
InforObj.length = 0;
}
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: centerCords
});
addMarkerInfo();
}
</script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
</body>
</html>
