Question

我有一张谷歌地图，需要点击地图＆＃39;按钮。一旦我点击它，所选div的内容将会被地图消失。

我阅读了以下问题但尚未解决。 1

DEMO（如果您在.HTML文件中复制以下代码，您会看到地图上的单词＆＃39;此处已消失，但在演示中它仍然停止。）

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>

</style>



<div class="container">
    <div id="row" class="row">




                <div class="col-md-7 top-section">

                    <div id="filterBtns" class="row">
                        <div id="map" class="filterbtn col-md-2 col-sm-2 hidden-xs"
                            onClick="populateMap()">Map</div>

                    </div>

                </div>

                    <div id="rightPanel" class="col-md-5 hidden-xs">

                        <div id="myList" class="details-myList">
                            Here
                        </div>
                        <div id="multiple-map" class="details-rightPanel-map"></div>
                    </div>






    </div>
</div>

    <script
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script type="text/javascript"
        src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
    <script>

        function hideMap() {
            $("#multiple-map").hide();
            $("#myList").show();
        }


        function populateMap() {
            $("#myList").hide();
            $("#multiple-map").show();
            google.maps.event.trigger(map, 'resize');
            map.fitBounds(bounds);
        }
        var map;
        var markers = [];
        var pinColor = "FE7569";
        var bounds;
        function pinImage(imagenum) {
            return image = new google.maps.MarkerImage(
                    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
                            + imagenum + "|" + pinColor);
        }

        function initialize() {

            var results = [
                    [
                            "A",
                            "47.3774496",
                            "8.50161", "0",
                            "id1"], [
                            "B",
                            "47.3880587",
                            "8.6004076", "1",
                            "id2"],];

            var results = results
                    .concat([
                        [
                                    "T",
                                    "52.0552086",
                                    "20.4228263",
                                    "0",
                                    "id6"],
                    ]);



            var results = results
                    .concat([
                             ]);

            var mapOptions = {
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('multiple-map'),
                    mapOptions);
            processResults(results);
            hideMap();
        }

        function processResults(results) {
            bounds = new google.maps.LatLngBounds();
            var infowindow = new google.maps.InfoWindow();
            markers = [];
            for (i = 0; i < results.length; i++) {

                var place = results[i][0];
                var elementId = "#marker-" + results[i][4];
                var placeLoc = new google.maps.LatLng(results[i][1],
                        results[i][2]);
                // Create a marker for each place.
                var marker = new google.maps.Marker({
                    title : place,
                    position : placeLoc,
                    icon : pinImage(i + 1)

                });

                markers.push(marker);
                bounds.extend(marker.position);

                var description = $("<image style='float:right;' class='marker' src='" + marker.icon.url + "'></image>");

                $(elementId).append(description);
                google.maps.event.addListener(marker, 'click', (function(
                        marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
            map.fitBounds(bounds);
            var markerCluster = new MarkerClusterer(map, markers);
            var listener = google.maps.event.addListener(map, "idle",
                    function() {
                        map.setZoom(13);
                        google.maps.event.removeListener(listener);
                    });
        }
        google.maps.event.addDomListener(window, 'load', initialize);



    </script>


    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>


</html>

Answer 1

您正在使用此加载窗口加载事件上的地图。

google.maps.event.addDomListener(window, 'load', initialize);

如果您希望在点击按钮时加载地图，只需将window替换为您的按钮选择器，在您的情况下#map并将load事件更改为click }

var mapButton = document.getElementById('map');
google.maps.event.addDomListener(mapButton, 'click', initialize);

请浏览official docs here。

单击按钮时需要显示Google Map

1 个答案: