web-dev-qa-db-ja.com

Google Maps API v3：情報ウィンドウのカスタムスタイル

Googleマップリファレンスや他のstackoverflowの質問から多くの例を試しましたが、情報ウィンドウでカスタムスタイルを取得することができませんでした。

私がやったことと非常に似たものを使用しています この他のスタックオーバーフローの答え

ここでは、作業/編集可能です： http://jsfiddle.net/3VMPL/

特に、丸みを帯びた角ではなく、四角の角を持ちたいと思います。

javascriptgoogle-maps
49
CloudMagick

Update： この回答 を参照して、gitboxへのインフォボックスソースコードの移行の状態を確認してください。

通常のInfowindowを使用するのではなく、Infoboxプラグインを使用してはどうですか？ jsfiddleの例はこちら に完全な例を示します。インフォボックスの主な点は、CSS（および必要に応じていくつかのjavascriptオプション）を使用して、ページのHTML内にインフォボックスを作成し、外観を完全に制御できることです。インフォボックスのHTMLは次のとおりです。

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

ここでのアイデアは"infobox-wrapper" divは非表示になり（つまり、cssのdisplay：none）、javascriptでInfoboxオブジェクトを初期化し、「infobox」（非表示のラッパー内）への参照を次のように与えます。

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    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: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

これは、利用可能なオプションのほんの一例です。唯一必要なキーはcontent-インフォボックスへの参照です。

情報ウィンドウを開くには：

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

そして、InfoBoxの柔軟性をさらに実証するために、 this jsfiddle には、「情報ボックス」としてcssトランジションを持つイメージがあります。

最後のヒント：htmlでクラス「infobox」を使用しないでください。残念ながら、infoboxが実際に生成されるときにプラグインによって使用されます。 。

118
DonVaughn

情報ボックスを使用できず、情報ウィンドウをカスタマイズする必要がある場合は、cssを使用してアクセスできます。それは見た目が悪く、first：child/last：child擬似セレクターに大きく依存しており、明らかにgoogleがマップのhtml構造を変更することを決定したかどうかに依存しています。

うまくいけば、以下のcssが他の誰かが情報ウィンドウに対処することを余儀なくされたときにバインドで助けてくれることを願っています。

/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}
29
giftlistmonkey

.gm-style-iwクラス。

  #map-canvas {
    .gm-style {
      > div:first-child > div + div > div:last-child > div > div {
        &:first-child > div,
        &:first-child > div > div > div,
        &:last-child,
        &:last-child > img {
          display: none !important;
        }
      }
      .gm-style-iw {
        top: 20px !important;
        left: 130px !important;
        background: #fff;
        padding: 10px;
        height: 40px;
      }
    }
  }
2
ivan.proskuryakov

Googleマップマーカーのクリックで透明な連絡先フォームのポップアップを表示したかった。最終的には、infoboxプラグインと この投稿 を使用して作成しました。 それが何であるか 私が作った。

誰でも here からソースをダウンロードして使用できます

1
Abu Shumon