Question

我有一张带有多个标记的地图，由纬度和经度定义。我想在单击标记时显示标记的地址。我认为这是一个普通的谷歌地图功能，但是当我点击标记时没有任何事情发生..

我该怎么做？

Answer 1

请提供您的API密钥以googleapi链接，地图图标和坐标

<div class="map-container-tab-1" id="map-container-1">

            </div>

<script src="https://maps.googleapis.com/maps/api/js?key= provide your key here"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

        var map, center = {lat: 10.382676, lng: 75.373828};
        if(window.innerWidth < 1200){
            center = {lat:10.382676, lng: 76.373828};
        }


        var hotels = [

            {
                id: 1,
                details: [
                    {title: "title name",
                        image: "image-url",
                        iconURL: "",
                        url: "page url"
                    }
                ],
                latLng: {lat: 9.978507, lng: 76.283289}
            },

            {
                id: 6,
                details: [
                    {
                        title: "title name",
                        image: "image-url",
                        iconURL: "",
                        url: "page url"
                    }],
                latLng: {lat: 10.061291, lng: 77.063856}
            },




        ];




        function initMap() {
            map = new google.maps.Map(document.getElementById('map-container-1'), {
                zoom: 8,
                center: center
            });


        }

        var infoWindows = [];
        function loadHotelMarkerInfo(hotel){
            var info = $(document.createElement('div'));

            var infoWrapper = $(document.createElement('div'))
                    .attr('class', 'content-full')
                    .attr('id', hotel.id)
                    .appendTo(info);

            hotel.details.forEach(function(detail){
                var titleWrapper = $(document.createElement('div'))
                        .attr('class', 'hotel-name')
                        .appendTo(infoWrapper);
                var title = $(document.createElement('h1'))
                        .attr('class', 'titleClasses')
                        .html(detail.title)
                        .appendTo(titleWrapper);

                var imgWrapper = $(document.createElement('div'))
                        .attr('class', 'hotel-image')
                        .appendTo(infoWrapper);
                var img = $(document.createElement('img'))
                        .attr('class', 'img-responsive')
                        .attr('src', detail.image)
                        .appendTo(imgWrapper);

                var txtWrapper = $(document.createElement('div'))
                        .attr('class', 'view-more')
                        .appendTo(infoWrapper);
                var link = $(document.createElement('a'))
                        .attr('class', 'linkClasses')
                        .attr('href', detail.url)
                        .attr('target', "_blank")
                        .html("View more")
                        .appendTo(txtWrapper);
            });



            var infoWindow = new google.maps.InfoWindow({
                content: info.html(),
                position: hotel.latLng,
                maxWidth: 500
            });

            infoWindows.push(infoWindow);

            var marker = new google.maps.Marker({
                position: hotel.latLng,
                map: map,
                title: hotel.title,
                icon: hotel.iconURL || "map-icon-image"
            });


            marker.addListener('click', function() {
                infoWindows.forEach(function(infoWindow){
                    infoWindow.close();
                });
                infoWindow.open(map, marker);
            });

        }

        function loadHotels(){
            hotels.forEach(loadHotelMarkerInfo);
        }

        function greyoutWorld() {
            var world_geometry = new google.maps.FusionTablesLayer({
                query: {
                    select: 'geometry',
                    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                    where: "ISO_2DIGIT IN ('IN')"
                },
                styles: [{
                    polygonOptions: {
                        fillColor: "GREEN",
                        strokeColor: "#ebebeb",
                        strokeWeight: "int"
                    },
                    polylineOptions: {
                        strokeColor: "#rrggbb",
                        strokeWeight: "int"
                    }
                }],
                map: map,
                suppressInfoWindows: false
            });
        }

        initMap();
        loadHotels()

    </script>

Google地图会在标记点击时显示地址

1 个答案: