Попытка создать несколько информационных блоков в Картах Google, которые исчезают при нажатии новой - PullRequest
Новая
       31

Попытка создать несколько информационных блоков в Картах Google, которые исчезают при нажатии новой

0 голосов
/ 09 марта 2012

Я использую плагин infoboxes для карт Google. У меня они работают хорошо - когда человек нажимает на точку на карте, всплывающее окно не вызывает проблем. Однако я хотел бы, чтобы всплывающее окно исчезало при выборе другого маркера.

Я нашел несколько примеров того, как подойти к этой проблеме, но мне трудно интегрировать эти решения в мой код. Я довольно новичок в javascript, и я мог бы действительно использовать некоторые рекомендации! 

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Smelting</title>
    <link
    href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
    rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&sfgdata=+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+a"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <style type="text/css">
    .infoBox h2
    {
        font-size: 22px;
        margin: 0 0 4px 2px;
        }
     .infoBox p
    {
        font-size: 14px;
        margin: 0 2px;
        }
    .infoBox a
    {
        color:White;
        text-decoration:none;
        }
   .infoBox p.sitenumber
    {
        font-size: 12px;
        margin: 7px 0 2px 2px;
        }
    .siteButton 
    {
        background-color: #465b66;
        padding: 7px 10px;
        text-align: center;
        margin-top: 15px;

    }
    </style>

    <script type="text/javascript">
        function initialize() {


            // Creating the map
            var map = new google.maps.Map(document.getElementById("map_canvas"), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false
            });

            // Styling the map 
            var styledMap = [{
                featureType: "all",
                stylers: [{
                    saturation: -80
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry",
                stylers: [{
                    hue: "#00ffee"
                }, {
                    saturation: 50
                }]
            }, {
                featureType: "poi.business",
                elementType: "labels",
                stylers: [{
                    visibility: "off"
                }]
            }

            ];

            //Calling the map styles
            map.setOptions({
                styles: styledMap
            });

            // List of images
            var images = [  'images/icon1.png', 'images/icon2.png','images/icon3.png'];
            loadMarkers();

            // Zoom and center the map to fit the markers
            var bounds = new google.maps.LatLngBounds();


            // Create the markers
            function addMarker(data, images) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.long),
                    map: map,
                    title: data.name,
                    icon: images[--data["dot-type"]]
                });

                var myOptions = {
                    content: boxTitle
                    , boxStyle: {
                       color: "#fff"
                      , textAlign: "left"
                      , fontSize: "12pt"
                      , width: "250px"
                      , height: "230px"
                      , padding: "10px"
                      , fontFamily: "Arial"
                      , fontStyle: "bold"
                      , background  : "transparent url( 'images/sampleback.png' ) no-repeat 0 0",
                    }
                    , disableAutoPan: true
                    , pixelOffset: new google.maps.Size(-90,-280)
                    , position: new google.maps.LatLng(data.lat, data.long)
                    , closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                    , isHidden: false
                    , pane: "floatPane"
                };

                var ib = new InfoBox(myOptions);
                var boxTitle = document.createElement("div");
                var boxNum = data.id;
                var boxTitle= data.name;
                var boxAddress = data.street;
                var boxCity = data.city;
                var boxSt = data.st;
                var boxZip = data.zip;

                var boxText = document.createElement("div");
                boxText.content = "<p class='sitenumber'>" + "Site #" + boxNum + "</p>" +"<h2>"+boxTitle+"</h2>" + "<p>" + boxAddress + "</p>"+ "<p>" + boxCity + ", " + boxSt + " " + boxZip +"</p>" + "<b>"  + "<a href='#'>" + "<div class= 'siteButton'>" + "VIEW THIS SITE DETAIL" + "</div>" + "</a>";

                google.maps.event.addListener(marker, "click", function (event) {
                    ib.setContent(boxText.content);
                    ib.open(map, marker);
                });

                bounds.extend(new google.maps.LatLng(data.lat, data.long));
                map.fitBounds(bounds);
            }

            function loadMarkers() {
                var siteUrl = "data/main.js";
                $.ajax({
                    dataType: "json",
                    url: siteUrl,
                    success: load
                });

                function load(data) {
                    for (index in data) addMarker(data[index], images);
                }
            };


        }


    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas"></div>
</body>

1 Ответ

0 голосов
/ 09 марта 2012

Причина, по которой для каждого маркера появляется одно окно, заключается в том, что вы создаете один ящик для каждого маркера.Если вам нужен только один блок, просто создайте его один раз и повторно используйте для каждого маркера.В вашем случае это просто включило бы помещение кода реализации вне функции addMarker: 

<script type="text/javascript">
    function initialize() {


        // Creating the map
        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false
        });

        // Styling the map 
        var styledMap = [{
            featureType: "all",
            stylers: [{
                saturation: -80
            }]
        }, {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [{
                hue: "#00ffee"
            }, {
                saturation: 50
            }]
        }, {
            featureType: "poi.business",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }

        ];

        //Calling the map styles
        map.setOptions({
            styles: styledMap
        });

        // List of images
        var images = [  'images/icon1.png', 'images/icon2.png','images/icon3.png'];
        loadMarkers();

        // Zoom and center the map to fit the markers
        var bounds = new google.maps.LatLngBounds();

        // Move the InfoBox creation here
        var myOptions = {
            content: boxTitle
            , boxStyle: {
               color: "#fff"
              , textAlign: "left"
              , fontSize: "12pt"
              , width: "250px"
              , height: "230px"
              , padding: "10px"
              , fontFamily: "Arial"
              , fontStyle: "bold"
              , background  : "transparent url( 'images/sampleback.png' ) no-repeat 0 0",
            }
            , disableAutoPan: true
            , pixelOffset: new google.maps.Size(-90,-280)
            , position: new google.maps.LatLng(data.lat, data.long)
            , closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            , isHidden: false
            , pane: "floatPane"
        };
        var ib = new InfoBox(myOptions);


        // Create the markers
        function addMarker(data, images) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data.lat, data.long),
                map: map,
                title: data.name,
                icon: images[--data["dot-type"]]
            });

            var boxTitle = document.createElement("div");
            var boxNum = data.id;
            var boxTitle= data.name;
            var boxAddress = data.street;
            var boxCity = data.city;
            var boxSt = data.st;
            var boxZip = data.zip;

            var boxText = document.createElement("div");
            boxText.content = "<p class='sitenumber'>" + "Site #" + boxNum + "</p>" +"<h2>"+boxTitle+"</h2>" + "<p>" + boxAddress + "</p>"+ "<p>" + boxCity + ", " + boxSt + " " + boxZip +"</p>" + "<b>"  + "<a href='#'>" + "<div class= 'siteButton'>" + "VIEW THIS SITE DETAIL" + "</div>" + "</a>";

            google.maps.event.addListener(marker, "click", function (event) {
                ib.setContent(boxText.content);
                ib.open(map, marker);
            });

            bounds.extend(new google.maps.LatLng(data.lat, data.long));
            map.fitBounds(bounds);
        }

        function loadMarkers() {
            var siteUrl = "data/main.js";
            $.ajax({
                dataType: "json",
                url: siteUrl,
                success: load
            });

            function load(data) {
                for (index in data) addMarker(data[index], images);
            }
        };


    }


</script>
...