Google マップで角が四角いカスタム情報ウィンドウを作成する方法

Google マップでのカスタム InfoWindow の作成

地図マーカーをクリックすると表示されるデフォルトの Google マップ InfoWindow は、角が丸いことが多いです。ただし、角が四角い、よりカスタマイズされた情報ウィンドウが必要な場合もあります。この記事では、このカスタマイズを実現するためのガイダンスを提供します。

JavaScript ライブラリの使用

外部 JavaScript ライブラリは、カスタム InfoWindows を作成するための堅牢なソリューションを提供します。人気のあるオプションの 1 つは、Google Maps Info Bubble ライブラリです。これにより、特定の要件に合わせて InfoWindows の外観、形状、コンテンツを変更できます。

実装例

次のコード スニペットは、カスタム ウィンドウの実装方法を示しています。 Info Bubble ライブラリを使用した InfoWindow:

<code class="js">const infoBubble = new google.maps.InfoWindowBubble({
  maxWidth: 300, // Maximum width of the InfoWindow
  maxHeight: 200, // Maximum height of the InfoWindow
  arrowPosition: 50, // Offset of the arrow from the center of the InfoWindow
  padding: 10, // Padding around the content of the InfoWindow
  borderWidth: 1, // Border width around the InfoWindow
  borderColor: "#000000", // Border color of the InfoWindow
  backgroundColor: "#FFFFFF", // Background color of the InfoWindow
  hideCloseButton: true, // Hide the close button on the InfoWindow
  borderRadius: 0, // Set the border radius to 0 for square corners
});

// Attach the custom InfoWindow to a map marker
const marker = new google.maps.Marker({
  position: {
    lat: 0,
    lng: 0,
  },
  map,
});
marker.addListener("click", () => {
  infoBubble.setContent("This is a custom InfoWindow.");
  infoBubble.open(map, marker);
});</code>

この例では、最大サイズが幅 300 ピクセル、高さ 200 ピクセルの四角形の InfoWindow を作成します。境界線は黒、背景は白で、閉じるボタンは表示されません。

代替手段

情報バブル ライブラリがニーズを満たさない場合は、次のような他のオプションを検討することを検討してください。 MarkerClusterer ライブラリまたは DataLayer ライブラリとして。どちらも、InfoWindows をカスタマイズし、Google マップのエクスペリエンスを向上させるための柔軟なソリューションを提供します。

以上がGoogle マップで角が四角いカスタム情報ウィンドウを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。