Googleマップ - オーバーレイ
オーバーレイは、マップ上の経度/緯度座標に結合したオブジェクトであり、マップをドラッグまたはズームするときに移動します。
GoogleマップAPIには次のオーバーレイがあります。
1.マップ上のポイントはマーカーを使用して表示され、通常はカスタムアイコンが表示されます。タグはタイプGmarkerのオブジェクトであり、アイコンはタイプGiconのオブジェクトを使用してカスタマイズできます。
2。マップ上の線は、ポリリン（ポイントのコレクションを表す）を使用して表示されます。ラインは、型Gpolylineのオブジェクトです。
3.マップ上の領域は、ポリゴン（任意の形状の場合）または底面の表面オーバーレイ（長方形の領域の場合）として表示されます。ポリゴンは閉じたポリラインに似ているため、あらゆる形状にすることができます。通常、地上オーバーレイは、タイルとの直接的または間接的な関連性を持つマップで使用されます。
4.マップ自体は、タイルオーバーレイを使用して表示されます。独自のタイルを持っている場合は、gtilelayeroverlayクラスを使用して、既にマップ上にあるタイルを変更したり、GmapTypeを使用して独自のマップタイプを作成したりできます。
5.情報ウィンドウは、特別なオーバーレイレイヤーでもあります。ただし、情報ウィンドウが自動的にマップに追加され、マップはタイプGinfowindowのオブジェクトを1つだけ追加できます。
Googleマップ - タグを追加します
マップ上のポイントをマークします。デフォルトでは、g_default_iconを使用します（カスタムアイコンを指定することもできます）。 Gmarkerコンストラクターは、GlatlngおよびGmarkeroptions（オプション）オブジェクトをパラメーターとして使用します。
マーカーは、インタラクティブになるように設計されています。たとえば、デフォルトでは「クリック」イベントを受け取ります。イベントは、イベントリスナーで情報ウィンドウを開くためによく使用されます。
setMap（）メソッドを介してマップにタグを追加します。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; Google.maps.marker（{position：mycenter、}）; marker.setmap（map）;} google.maps.event.adddomilistener（window、 'load'、initialize）; </scripize> </head> <body> <div id = "googlemap"> </div> </html>レンダリングの例：
Googleマップ - ドラッグ可能タグ
次の例では、アニメーションプロパティを使用してタグをドラッグする方法について説明します。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< google.maps.latlng（51.508742、-0.120850）; var marker; function initialize（）{center：mycenter、zoom：5、maptypeid：google.maps.maptypeid. roadmap}; var map = new = new google.maps.map（document.getElementById（ "googlemap"）、mapprop）; marker = new Google.mapser（{position：mycenter、animation：google.maps.animation.bounce}）; marker.setmap（map）;} google.maps.event.event.event.dddddodlistener（window、 'load、' load ' initialize）; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Googleマップ - アイコン
タグは、デフォルトのアイコンではなく、カスタムの新しいアイコンで表示できます。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; google.maps.marker（{position：mycenter、icon： 'pinkball.png'}）; marker.setmap（map）;} google.adddomilistener（window、 'load'、initialize）; </script> </head> <body> <div id = "googlemaGoogleマップ - 折りたたみ線
gpolylineオブジェクトは、マップに線形オーバーレイを作成します。 Gpolylineには一連のポイントが含まれており、これらのポイントを整然と接続する一連のラインセグメントを作成します。
ポリリンは次の特性をサポートしています。
パス - 複数の直線の緯度/経度座標を指定します
strokecolor-行の16進数を指定します（フォーマット： "#ffffff"）
strokeopacity-線の透明度を指定します（値は0.0〜1.0）
ストローク級 - ピクセルのラインの幅を定義します。
編集可能 - ユーザーが直線を編集できるかどうかを定義します（true/false）
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </x = new google.maps.latlng（52.395715,4.888916）; var stavanger = new google.maps.latlng（58.98391,5.734863）; var amsterdam = new google.maps.latlng（52.395715,4.888916）; google.maps.latlng（51.508742、-0.120850）; function initialize（）{var mapprop = {center：x、zoom：4、maptypeid：google.maptypeid.roadmap}; var map = new Google.maps.map（document.getElementById（ "googlemap"）、mapprop）; var mytrip = [stavanger、amoctidam、amoctidam、london]; var flightpath = new google.maps.polyline（{path：mytrip、strokecolor： "＃0000ff"、Strokeweight：2 strekeweight：2 }）; flightPath.setMap（map）;} google.maps.event.adddomlistener（window、 'load'、initialize）; </scripiz）; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>レンダリングの例：
Googleマップ - ポリゴン
GPolygonオブジェクトは、すべての順序ポイントが含まれるという点で、GPolylineオブジェクトに似ています。ただし、ポリリンなどの2つのエンドポイントを持つ代わりに、ポリゴンは閉じたループを形成する領域を定義するように設計されています。
ポリリンと同様に、ポリゴンエッジ（線）の色、厚さ、透明性、および閉じた充填エリアの色と透明度をカスタマイズできます。色は16進数HTMLスタイルにある必要があります。
ポリゴンは次の特性をサポートしています。
パス - 複数の直線緯度の座標を指定します（最初と最後の座標は等しい）
strokecolor-行の16進数を指定します（フォーマット： "#ffffff"）
strokeopacity-ラインの透明度を指定します（この値は0.0〜1.0）
ストローク級 - ピクセルのラインの幅を定義します。
fillcolor-閉じたエリアの16進数を指定します（フォーマット： "#ffffff"）
塗りつぶし - 充填色の透明度を指定します（値は0.0〜1.0）
編集可能 - ユーザーが直線を編集できるかどうかを定義します（true/false）
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </x = new google.maps.latlng（52.395715,4.888916）; var stavanger = new google.maps.latlng（58.98391,5.734863）; var amsterdam = new google.maps.latlng（52.395715,4.888916）; google.maps.latlng（51.508742、-0.120850）; function initialize（）{var mapprop = {center：x、zoom：4、maptypeid：google.maptypeid.roadmap}; var map = new Google.maps.map（document.getElementById（ "googlemap"）、mapprop）; var mytrip = [stavanger、amorterdam、london、stavanger]; var flightpath = new google.maps.polygon（{path：mytrip、strokecolor： "＃0000ff"、strokeafacity：0.8、strokewieigh： fillcolor： "＃0000ff"、fillopacity：0.4}）; flightpath.setmap（map）;} google.maps.event.adddomilistener（window、 'load'、initialize）; </scripiz）; </scripize）; </scripiz> </head> <body> <div id = "googlemap"> </div> </html>レンダリングの例：
Googleマップ - サークル
円は次の特性をサポートしています。
センター - 円の中心点パラメーターを指定しますGoogle.maps.latlng
半径 - メートルで円の半径を指定します
strokecolor -arcの16進数を指定します（形式： "#ffffff"）
strokeopacity-アークの透明性を指定します（値は0.0〜1.0）
ストローク級 - ピクセルのラインの幅を定義します。
fillcolor -Circleの16進数の充填値を指定します（フォーマット： "#ffffff"）
塗りつぶし - 充填色の透明度を指定します（値は0.0〜1.0）
ユーザーが直線を編集できるかどうかを定義します（true/false）
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </amgerdam = new google.maps.latlng（52.395715,4.888916）; function initialize（）{bar mapprop = {center：amsterdam、zoom：7、maptypeid：google.maps.maptypeid.roadmap}; var map = new Google.maps.map（document.getElementById（ "googlemap"）、mapprop）; var mycity = new google.maps.circle（{center：amsterdam、radius：20000、strokecolor： "＃0000ff"、strokeopacacity：0.8、strokewight： " }）; myCity.SetMap（Map）;} Google.Maps.Event.AdddomListener（window、 'load'、initialize）; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>レンダリングの例：
Googleマップ - 情報ウィンドウ
タグにテキストメッセージウィンドウを表示します。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; Google.maps.marker（{position：mycenter、}）; marker.setmap（map）; var infowindow = new google.maps.infowindow（{content： "hello world！"}）;} google.maps.event.adddomlistener（firtionize） 'load'、load.adddomlistener（</</< id = "googlemap"> </div> </body> </html>レンダリングの例：
上記は、Googleマップのオーバーレイに関する情報の編集です。後で追加し続けます。このサイトへのご支援ありがとうございます！