Gmaps.jsで簡単に作られたGoogleマップ

Googleマップは、Street View、Route Planning、Googleトラフィックなどのさまざまな貴重なツールを組み込んだ非常に成功したGoogleサービスであることが証明されています。多くの企業や組織は、Googleマップに依存してサービスを提供しています。GoogleマップAPIのおかげで、そうすることができます。

キーテイクアウト

gmaps.jsは、GoogleマップJavaScript APIを簡素化するオープンソースJavaScriptライブラリであり、開発者がマップを使用してカスタムアプリケーションを簡単に作成できるようにするため、
• gmaps.jsは、マーカー、ポリゴン、オーバーレイ、ジオロケーション、ジオコーディング、イベントなど、マップをカスタマイズするためのさまざまなコンポーネントを提供しています。また、Webサイトに埋め込むことができる静的マップを作成することもできます。
ライブラリは、マーカーを追加および取り外し、ポリリンとポリゴンを描画し、円形の形状を作成し、HTMLコンテンツを使用してオーバーレイを追加する方法を提供します。 GMAPS.jsのGeoCode（）メソッドを使用して、特定の場所アドレスから地理的座標を計算するプロセスであるGeocodingを達成できます。同様に、Geolocate（）メソッドを使用して、ユーザーの現在の地理的位置を計算できます。
• gmaps.jsはイベントもサポートしているため、開発者はダブルクリックやマウスオーバーなどの特定のイベントの発生に関する関数を呼び出すことができます。
• GoogleマップAPIとGMAPS
• Googleは2005年にGoogle Maps APIを導入しました。これにより、開発者はマップを使用してカスタムアプリケーションを作成することができました。 Googleはその後、AndroidおよびiOSアプリケーション開発用のAPIを発売しました。
マップAPIと同じように便利であるため、利用する方法を少し考えています。 GMAPS.JSが入ってくる場所です。GMAPS.JSは、オープンソースのMIT-Licence JavaScriptライブラリです。 Gustavo Leonによって書かれたGMAPSは、元のGoogleマップJavaScript APIを簡素化することを目指しています。広範なAPIコードを処理し、マップを処理するための適切な方法を提供します。よりクリーンで、より簡潔で、したがって使いやすいです この記事では、マーカー、ポリゴン、オーバーレイなどのマップコンポーネントを見ていきます。また、静的マップ、およびユーザーの場所で動作するためのジオロケーションとジオコーディングの使用についても説明します。これらはすべてGMAPSに関連しています。使いやすい方法でマップアプリケーションを作成するのに役立ちます。私はそれを使用してサンプルアプリケーション（MAPIT）を作成しました。これについては、記事の最後にさらに説明します。
• Google APIとGMAPSと比較されました

以下の例は、元のドキュメントページからです。コード（javascriptのみ）は、緯度-34.397と経度150.644の中心を備えたマップをロードし、ズームレベルは8：

マップは、マップがロードされるHTML要素IDです。

このようなGMAPを使用して同じ基本アプリを書くことができます：

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

このチュートリアルでは、マップで最も使用されているコンポーネントのいくつかをガイドします。それぞれをデモンストレーションするためのペンの例を使用してください。

始めましょう

基本的なHTMLページを作成し、マップAPIへの参照を追加します。 GMAPSライブラリも含める必要があります。したがって、GMAPSにアクセスしてGMAPS.jsをダウンロードしてください。あなたのウェブページにそれを含めると、あなたは行き​​ます。

これは、以下のスニペットの例で参照する初歩的なページです。マップオブジェクトは、これらの例のいくつかで変更されます。

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

コンポーネント

マップAPIは、マップをカスタマイズするためのさまざまなコンポーネントを提供しています。コードが少ないGMAPで同じコンポーネントを追加できます。

イベント

HTML DOM（ドキュメントオブジェクトモデル）の変更は、イベントとして説明できます。マップ上の特定のイベントの発生に関する関数を呼び出すことができます（ダブルクリックやマウスオーバーなど）。次のスニペットは、クリックおよびZoom_Changedイベントの機能を定義しています：

必要に応じて他のイベントを追加できます。すべてのマップイベントのリストは、ドキュメントの

イベント

セクションに記載されています。便利なもののいくつかは次のとおりです

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

event 説明

dblclick ダブルマウスクリック マウスオーバー マウスはマップに入ります マウスアウト マウスはマップを終了します ドラッグ マップがドラッグされます 右クリック 右マウスクリック 例ペンの例 マーカー マーカーはマップ上のロケーターです。通常、マークされた場所にぶら下がっている風船として表示されます。 GMAPSは、マーカーを追加するAddMarker（）メソッドを提供します。マーカーの次のプロパティでリテラルを受け入れます。

lat：緯度

lng：経度

タイトル：マウスオーバーに表示されるタイトル

• アイコン：マーカーのカスタム画像
• 詳細：追加のデータを備えたカスタムオブジェクト
• infowindow：マーカー
に関する情報
• これらのうち
は、値とLNGに値を割り当てることが必須ですが、他の値はオプションです。 Infowindowの値は別のオブジェクトである必要があります。このオブジェクト自体には、次のプロパティがあります
コンテンツ：htmlコンテンツ
maxwidth：ウィンドウの最大幅。設定されていない場合、ウィンドウはその中のテキストの長さに及びます。

Infowindowはさらにいくつかのオプションをサポートしています

このスニペットは、addmarker（）：

の有効な例です
addmarker（）もイベントを受け入れます。たとえば、マウスオーバーイベントに反応するマーカー：

例ペンの例

removemarker（）メソッドを使用してマーカーを削除できます。マーカーオブジェクトを引数として渡す（私たちの場合はm）：

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

removemarkers（）は、マップオブジェクトに関連付けられたすべてのマーカーを集合的に削除します。

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

geocoding

マップ上の任意のポイントを見つけるには、その地理的座標（緯度および経度）が必要です。ジオコーディングは、特定の場所アドレスからこれらの地理的座標を計算しています。 GeoCode（）メソッドを使用すると、同じことを可能にします。入力としてロケーションアドレスを取得し、そのアドレスの調整をプロセスします。

アドレス：ロケーションアドレス文字列
コールバック：ジオコディング後に呼び出される関数

Stonehenge の緯度と経度を計算しましょう。下のスニペットは、指定されたアドレスの地理的座標を計算し、その場所のマップを中央に置きます。結果が見つからない場合、メッセージが表示されます：

setCenter（）メソッドは、そのパラメーターとして緯度と経度を取り、その地理的位置のマップを中心にします。また、オプションのコールバックパラメーターも受け入れます。これは、マップが中央に配置された後にトリガーされる関数です。

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

コールバック関数には2つのパラメーターがあります。結果とステータス。

結果はオブジェクトアレイであり、すべての場所の場所を定義されたアドレスで保存します。同じ名前の場所が複数ある可能性があるため、複数の結果が生じる可能性があります。結果はそれぞれを保存します。結果の結果[i] .geometry.location。

アドレスの結果が見つからなかった場合、ステータスストア

zero_results

、else

ok^。

例ペンの例

Geolocation ジオロケーションは、ユーザーの現在の地理的位置を計算します。 Geolocate（）メソッドにより、この機能を活用できます。 4つのプロパティを持つリテラルオブジェクトを受け入れます。そのプロパティは常にオプションであり、他のプロパティはすべて必要です。各プロパティは、特定の場合に実行される関数として定義されます。

成功：ジオロケーションは成功しました

エラー：ジオロケーションは成功しませんでした

not_supported：ブラウザはジオロケーションをサポートしていません

常に：すべての場合に実行されます

• 例ペンの例
• ポリリン
• ポリリンは、マップ上のパスを追跡するのに役立ちます。さまざまなポイントの座標を結合することでパスを形成できます。 DrawPolyline（）メソッドは、パスのポリラインを描画します。このパスは、座標の配列として提供されます（
緯度

および

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

経度

）。パスとは別に、ポリラインの他のプロパティを指定できます。それらのいくつかは次のとおりです

ストローク級

strokecolor strokeopacity

3つすべてがポリラインのスタイルを定義します。他にもありますが、この記事では説明しませんが、

例ペンの例
removepolyline（）メソッドを使用してポリラインを削除できます。ポリラインオブジェクトをパラメーターとして使用します。 ：
• を使用してPLポリインを削除します

  <span>var map;
  </span><span>function initMap() {
  </span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
  </span>    <span>center: {lat: -34.397, lng: 150.644},
  </span>    <span>zoom: 8
  </span>  <span>});
  </span><span>}</span>

  removepolylines（）は、MAPオブジェクトに関連付けられたすべてのポリリンを除去します。

  <span>new GMaps({
  </span>  <span>el: '#map',
  </span>  <span>lat: -34.397,
  </span>  <span>lng: 150.644,
  </span>  <span>zoom: 8
  </span><span>});</span>

  ポリゴン
  drawPolygon（）は、マップ上にポリゴンを作成するのに役立ちます。 DrawPolyline（）メソッドとほとんど同じように、Pathsプロパティを定義する必要があります。ストロークスタイルの特性（ストローク級、ストロークカラー、ストロークパシティ）のポリゴンの作品も同様です。彼らはポリゴンの境界を定義します。これらに加えて、ポリゴンの塗りつぶしの色と不透明度を指定できます。
  fillcolor
  • fillopacity
  その他のポリゴンオプションは、ドキュメントに記載されています。
  覚えておいてください：それはdrawpolyline（）のパスプロパティとdrawpolygon（）のパスプロパティです。

  <span><span>
  </span><span><span><span>></span>
  </span>  <span><span><span>></span>
  </span>    <span><span><span><style>></style></span><span>
  </span></span><span><span>      <span><span>#map</span> {
  </span></span></span><span><span>        <span>width: 400px;
  </span></span></span><span><span>        <span>height: 400px;
  </span></span></span><span><span>      <span>}
  </span></span></span><span><span>    </span><span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span>  <span><span><span>></span>
  </span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
  </div></span>></span>
  </span>
      <span><!-- Google Maps JS API -->
  </span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
  </span>    <span><!-- GMaps Library -->
  </span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script>></script></span><span>
  </span></span><span><span>      <span>/* Map Object */
  </span></span></span><span><span>      <span>var mapObj = new GMaps({
  </span></span></span><span><span>        <span>el: '#map',
  </span></span></span><span><span>        <span>lat: 48.857,
  </span></span></span><span><span>        <span>lng: 2.295
  </span></span></span><span><span>      <span>});
  </span></span></span><span><span>    </span><span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span><span><span><span></span>></span></span></span></span></span></span></span></span>

  例ペンの例

  ポリゴンpgを削除するには、

  を使用してください
  mapobjで定義されているすべてのポリゴンを削除します：

  <span>var mapObj = new GMaps({
  </span>  <span>el: '#map',
  </span>  <span>lat: 48.857,
  </span>  <span>lng: 2.295,
  </span>  <span>click: function(e) {
  </span>    <span>alert('You clicked on the map');
  </span>  <span>},
  </span>  <span>zoom_changed: function(e) {
  </span>    <span>alert('You zoomed the map');
  </span>  <span>}
  </span><span>});</span>

  円
  drawpolygon（）を使用して円形の形状を作成することは実行不可能です。 DrawCircle（）はそれを助けます。そのパラメーターリストには次のものが含まれています

  <span>var m = mapObj.addMarker({
  </span>  <span>lat: 48.8583701,
  </span>  <span>lng: 2.2944813,
  </span>  <span>title: 'Eiffel Tower',
  </span>  <span>infoWindow: {
  </span>    <span>content: '<h4 id="Eiffel-Tower">Eiffel Tower</h4>
  <div>Paris, France</div>',
  </span>    <span>maxWidth: 100
  </span>  <span>}
  </span><span>});</span>

  lat：中心

  の緯度

  lng：中心

  の経度
  半径：地球の表面のメートルの半径。
  • その他のオプションには、ストロークのスタイルと形状の塗りつぶし（ポリゴンと同じ）などが含まれます。
  • 例ペンの例
  オーバーレイ
  オーバーレイは、HTMLコンテンツが付いたマップ上のレイヤーです。 GMAPSは、Drawoverlay（）メソッドを使用してオーバーレイをサポートしています。次のハッシュを受け入れます：

  mapObj<span>.addMarker({
  </span>  <span>lat: 48.8583701,
  </span>  <span>lng: 2.2944813,
  </span>  <span>mouseover: function(e) {
  </span>    <span>alert('Triggered');
  </span>  <span>}
  </span><span>});</span>

  lat：緯度
  lng：経度
  コンテンツ：htmlコンテンツ
  • verticalAlign：上、中央、下
  • horizo​​ntalalgin：左、中央、右
  • verticalOffset
  • horizo​​ntaloffset
  アラインメントとオフセットは、LATとLNGによって定義されたポイントに関してです。
  • サンプルスニペット：
  コンテンツのCSSスタイルを定義できます。この例では、オーバーレイクラスを定義しました

  例ペンの例

  オーバーレイを削除しますか？まあ、あなたはそれを知っています：

  mapObj<span>.removeMarker(m);</span>

  マップオブジェクトのすべてのオーバーレイを削除しますか？あなたもそれを知っています：

  mapObj<span>.removeMarkers();</span>

  静的マップ

  静的マップはマップの画像であり、独立してWebサイトに埋め込むことができます。 GMAPSを使用すると、静的マップにURLを生成できます。このURLは、ソースとして画像に追加できます。

  staticMapurl（）次のパラメーターを取得した後、必要なマップURLを生成します。

  <span>GMaps.geocode({
  </span>  <span>address: 'Stonehenge, United Kingdom',
  </span>  <span>callback: function(results<span>, status</span>) {
  </span>    <span>if (status == 'OK') {
  </span>      latlng <span>= results[0].geometry.location;
  </span>      mapObj<span>.setCenter(latlng.lat(), latlng.lng());
  </span>    <span>} else if (status == 'ZERO_RESULTS') {
  </span>      <span>alert('Sorry, no results found');
  </span>    <span>}
  </span>  <span>}
  </span><span>});</span>

  サイズ：ピクセルの幅と高さの配列

  <span>GMaps.geolocate({
  </span>  <span>success: function(position) {
  </span>    mapObj<span>.setCenter(position.coords.latitude, position.coords.longitude);
  </span>  <span>},
  </span>  <span>error: function(error) {
  </span>    <span>alert('Geolocation failed: ' + error.message);
  </span>  <span>},
  </span>  <span>not_supported: function() {
  </span>    <span>alert("Your browser does not support geolocation");
  </span>  <span>},
  </span>  <span>always: function() {
  </span>    <span>alert("Always");
  </span>  <span>}
  </span><span>});</span>

  lat
  lng
  Zoom
  コードスニペット：
  • 例ペンの例
  • 私たちの例では、IMG要素を作成し、そのSRCにURLを追加しました：
  マーカーとポリリンも静的マップに適用できます。

  例ペンの例

  サンプルアプリケーション（mapit）

  Mapit（GitHubのソースを表示）は、ソースと宛先の間のルートの静的マップを作成します。マップ上のアドレスにズームダウンし、2つのマーカー（ソースと宛先）を配置します。 Mapitは、あるマーカーから別のマーカーへのルートをトレースします。現在の構成を使用して、静的マップにURLを作成します。静的マップをプレビューして画像をダウンロードできます。

  結論

  この記事では、マップの基本的なコンポーネントをカバーしています。 GMAPSおよびインタラクティブマップアプリケーションの優れた開始ガイドとして役立ったと確信しています。しかし、ここで止まるべきではありません。 gmapsjsでできることはもっとたくさんあります。

  まだGMAPを使用していますか？もしそうなら、あなたの経験は何でしたか。コメントや質問がある場合は、以下で説明してください。 GMAPS.js

  を使用したGoogleマップに関するよくある質問（FAQ） gmaps.jsを開始するにはどうすればよいですか？

  gmaps.jsを始めるには、最初にHTMLファイルにGoogleマップJavaScript APIを含める必要があります。その後、gmaps.jsライブラリを含めます。公式のGitHubリポジトリからダウンロードするか、CDNを使用できます。これらのスクリプトを含めたら、新しいGMAPSオブジェクトを作成し、HTML要素のIDを渡すことにより、新しいマップを初期化することができます。地図の。マップを作成および操作するためのシンプルで直感的なAPIを提供します。主な機能には、マーカー、ポリゴン、レイヤー、ジオロケーション、ジオコーディングなどを簡単に追加する機能が含まれます。また、イベントをサポートし、クリックやドラッグなどのユーザーインタラクションに応答できるようにします。
  gmaps.js？
  GMAPSを使用してマップにマーカーを追加するにはどうすればよいですか.jsは簡単です。 GMAPSオブジェクトのAddMarkerメソッドを使用して、マーカーの緯度と経度でオブジェクトを渡すことができます。タイトル、クリックイベントなどの他のオプションを含めることもできます。ユーザーの現在の場所を取得します。この方法は、ユーザーの緯度と経度とともに解決する約束を返します。次に、この情報を使用してユーザーの場所にマップを集中するか、その場所にマーカーを追加できます。アドレスは、マーカーを配置したり、マップを配置するために使用できる地理的座標にアドレスを与えます。 gmaps.jsは、アドレスを取得し、ジオコードされた結果で解決する約束を返すジオコードメソッドを提供します。

  gmaps.js？

  gmaps.jsを使用してマップにイベントを追加するにはどうすればよいですか？ addListenerメソッドを使用してGMAPSオブジェクトにイベントリスナーを追加し、イベントが発生したときに実行されるイベント名とコールバック関数を渡すことができます。 ？

  gmaps.jsは、トラフィック、トランジット、自転車層など、さまざまな種類のレイヤーをマップに追加することをサポートしています。 gmapsオブジェクトのaddlayerメソッドを使用してレイヤーを追加し、レイヤーの名前を渡すことができます。ライン、ポリゴン、円、長方形など、さまざまな形をマップに描画する方法を提供します。 GMAPSオブジェクトにドローバーレイ、ドローポリゴン、ドローシール、およびドローレクトアングルメソッドを使用できます。スタイルを使用してマップの外観をカスタマイズします。 GMAPSオブジェクトを作成するときにスタイルオプションを渡すことができます。これは、マップのさまざまな要素をスタイル化する方法を説明するスタイルオブジェクトの配列である必要があります。 🎜>

  gmaps.jsは、ライブラリを使用するときに発生するエラーを処理する方法を提供します。 GMAPSオブジェクトの「エラー」イベントを聞くことができます。これは、エラーが発生するたびにトリガーされます。イベントオブジェクトには、メッセージやスタックトレースなど、エラーに関する情報が含まれます。

以上がGmaps.jsで簡単に作られたGoogleマップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。