Need code to add multiple markers on google maps. Code looks ok but it ain't

I am wanting to place multiple markers on a Google map, I then need the markers location to change/update, so I assume layers maybe the way forward. I have found this good below but still not working.

Could you guys take a quick look and give me some pointers/advice.

<!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 markersOnMap = [{
                placeName: "Australia (Uluru)",
                LatLng: [{
                    lat: -25.344,
                    lng: 131.036
                }]
            },
            {
                placeName: "Australia (Melbourne)",
                LatLng: [{
                    lat: -37.852086,
                    lng: 504.985963
                }]
            },
            {
                placeName: "Australia (Canberra)",
                LatLng: [{
                    lat: -35.299085,
                    lng: 509.109615
                }]
            },
            {
                placeName: "Australia (Gold Coast)",
                LatLng: [{
                    lat: -28.013044,
                    lng: 513.425586
                }]
            },
            {
                placeName: "Australia (Perth)",
                LatLng: [{
                    lat: -31.951994,
                    lng: 475.858081
                }]
            }
        ];

        window.onload = function () {
            initMap();
        };

        function addMarkerInfo() {
            for (var i = 0; i < markersOnMap.length; i++) {
                var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                    '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                const marker = new google.maps.Marker({
                    position: markersOnMap[i].LatLng[0],
                    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>

I am unsure what the issue is as it looks ok.

Need code to add multiple markers on google maps. Code looks ok but it ain't

0 Answers