Saya memiliki dua tanda Saya ingin membuat setiap tanda memiliki gambarnya sendiri, dan di sini menunjukkan dua tanda dengan gambar yang sama Saya tidak ingin mengulangi gambar Saya ingin dua gambar yang berbeda. Tolong bantu saya dan terima kasih dengan tulus.

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps Multiple Markers</title>
    <script src="http://maps.google.com/maps/api/js?key= AIzaSyCpuOArmqJRLE8nl9V_g-KH7M8zwhsnFf0&callback=intiMap" type="text/javascript"></script>

</head>

<body>

    <div id="map" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        var locations = [
            ['جامعة الملك سعود', 24.729004, 46.624154, 1],
            ['جامعة الإمام محمد بن سعود', 24.814796, 46.7127355, 2],

        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(24.6742437, 46.7759905),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: {
                    url: "https://3.top4top.net/p_1390st3q12.png"
                },
                icon: {
                    url: "https://6.top4top.net/p_1390latqo1.png"
                }
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    </script>
</body>

</html> ```
-2
Fahad Sayyaf 23 Oktober 2019, 01:07

1 menjawab

Jawaban Terbaik

Yang harus Anda lakukan adalah membuat array ikon dan mengaksesnya dalam iterasi.

Lihat cuplikan saya dan semoga harimu menyenangkan :)

   <html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Google Maps Multiple Markers</title>
        <script src="http://maps.google.com/maps/api/js?key= AIzaSyCpuOArmqJRLE8nl9V_g-KH7M8zwhsnFf0&callback=intiMap" type="text/javascript"></script>

    </head>

    <body>

        <div id="map" style="width: 800px; height: 600px;"></div>

        <script type="text/javascript">
            var locations = [
                ['جامعة الملك سعود', 24.729004, 46.624154, 1],
                ['جامعة الإمام محمد بن سعود', 24.814796, 46.7127355, 2],

            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(24.6742437, 46.7759905),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            // make new array for icons
            var icons = [
              "https://3.top4top.net/p_1390st3q12.png",
              "https://6.top4top.net/p_1390latqo1.png"
            ]

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: {
                        // access icons by iteration
                        url: icons[i]
                    }
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>
    </body>

    </html>
0
hifebriansyah 22 Oktober 2019, 22:16