Icon Multi Marker Personalizzate Google Maps

maxnegri · 15 Mag 2020

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?

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>

Cerca

Cerca

Icon Multi Marker Personalizzate Google Maps

maxnegri

Utente Attivo

Discussioni simili