我想自定义googlemap的infowindow我不想使用infobubble

时间:2015-02-12 15:08:22

标签: google-maps infowindow

我想删除infowindow的边缘,因此图片周围没有白色。就像在这张照片中一样!

infowindow

1 个答案:

答案 0 :(得分:0)

我必须使用信息框来使它像这样工作:

function initialize() {
    var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

    var myMapOptions = {
         zoom: 14,
         center: secheltLoc,
         mapTypeId: google.maps.MapTypeId.ROADMAP,

    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: new google.maps.LatLng(49.47216, -123.76307),
        visible: true
    });

    var marker2 = new google.maps.Marker({
        map: map,
        draggable: true,
        position: new google.maps.LatLng(49.47016, -123.76007),
        visible: true
    });


    var boxText = document.createElement("div");
    boxText.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: {                
          background: "url('tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "280px"
         }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };


    var boxText2 = document.createElement("div");
    boxText2.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
    boxText2.innerHTML = "test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>";

    var myOptions2 = {
         content: boxText2
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: {
          background: "url('tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "280px"
         }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };


    var ib = new InfoBox();
    google.maps.event.addListener(marker, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions)
        ib.open(map, this);
    });



   google.maps.event.addListener(marker2, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions2)
        ib.open(map, this);
    });

}

http://jsfiddle.net/neo3000ultra/9jhAy/