如何删除Google infoBox中的箭头?

时间:2014-08-05 15:29:11

标签: google-maps google-maps-api-3

您好我将使用infoBox而不是infoWindow和InfoBubble。我可以删除infoBubble的箭头,其属性为 arrowSize:0 ..... 但我无法移除我的infoBox的箭头。这是我的代码......

<html>
    <head>
        <title>Street View service</title>
        <style>
            .infobox-wrapper {
                display:none;
                }
            #infobox {
                border:0px solid black;
                margin-top: 8px;
                background:#000000;
                color:#FFF;
                font-family:Arial, Helvetica, sans-serif;
                font-size:12px;
                padding: .5em 1em;
                -webkit-border-radius: 10px;
                -moz-border-radius: 2px;
                border-radius: 14px;
                text-shadow:0 -1px #000000;
                -webkit-box-shadow: 0 0  8px #000;
                box-shadow: 0 0 8px #000;
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
        <script>
            function initialize() 
            {
                var fenway = new google.maps.LatLng(13.064043, 80.243705);
                var mapOptions = {
                center: fenway,
                zoom: 14
            };

            var panoramaOptions = {
            position: fenway,
             pov: {
              heading: 34,
              pitch: 10
             }
            };

            // MAP
            var panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), panoramaOptions);

            // MARKER
            var markerSample = new google.maps.Marker({
                position: new google.maps.LatLng(13.063982175280051,80.24356022683605),
                        //position: new google.maps.LatLng(12.925487288255711, 80.25075146336849),
                        //icon : iconLocation,
                        //draggable : isDraggable,
                        map: panorama
                     });

            // info window start here.
            var infowindow = new InfoBox({
                 content: document.getElementById("infobox"),
                 disableAutoPan: true,
                 maxWidth: 150,
                 pixelOffset: new google.maps.Size(-140, 0),
                 zIndex: null,
                 boxStyle: {
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "320px"
                },
                closeBoxMargin: "12px 4px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1)
            });

            var contentString = '<div id="infobox">'+
                              '<div id="siteNotice">'+
                              '</div>'+
                              '<h1 id="firstHeading" class="firstHeading">LOA Softwares</h1>'+
                              '<div id="bodyContent">'+
                              '<p><b>Just Development</b>' +
                              '<p>shenicinfo.com dfdlkf dj kfdfjkdlkfj</p>'+
                              '<p>Attribution: Uluru, <a href="http://www.loasoftwares.com">loa softwares df dg dfgdfgldfjdn ogfdn</a>'+
                              'software developemts</p>'+
                              '</div>'+
                              '</div>';
            infowindow.setContent(contentString);

            google.maps.event.addListener(markerSample, 'click', function () {
                //infowindow.setMap(panorama);
                console.log('clicked');
               //$("#mySampleDialogBox").dialog();
               infowindow.open(panorama,markerSample);
              // infowindow.setMap(panorama);
                console.log("InfoWindow Crossed ...");
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 100%;"></div>
    </body>
</html>

0 个答案:

没有答案