gmaps.jsは、Google Maps APIを使用する最も簡単な方法です

こんにちは

gmaps.jsと呼ばれるGoogle Maps APIを便利に使用するための1つの小さな(〜30kb)JSライブラリについて説明します。
ライブラリはウェブ開発のプロセスを加速するために作成されたので、遅れることはありません。 名前が示すように、Google Maps APIやり取りを単純化するだけです。 あなたの多くはAPIを使って作業しましたが、たぶんドキュメントをざっと調べて、マップ上のマークの独自の説明を実装しなければなりませんでした。 または、カードを使用したインタラクションイベントにサブスクライブします...

そのため、彼女はまだ単一のメジャーバージョンを取得しておらず、現在バージョン0.1.12.3を持っています。 MITライセンスの下で配布され、コミュニティ全体で開発されています(これについても支援できます)。

機能の例


地図作成

new GMaps({ div: '#map', lat: -12.043333, lng: -77.028333 }); 

また、オプションzoomwidthheightを追加できます。 ただし、標準によれば、カードの幅と高さはコンテナに適合します。

イベント

 map = new GMaps({ div: '#map', zoom: 16, lat: -12.043333, lng: -77.028333, click: function(e) { alert('click'); }, dragend: function(e) { alert('dragend'); } }); 

すべてのMaps APIイベントがサポートされています。

ジオロケーション

 GMaps.geolocate({ success: function(position) { map.setCenter(position.coords.latitude, position.coords.longitude); }, error: function(error) { alert('Geolocation failed: '+error.message); }, not_supported: function() { alert("Your browser does not support geolocation"); }, always: function() { alert("Done!"); } }); 

まあ、かわいいでしょ?

マーカーを追加

 map.addMarker({ lat: -12.043333, lng: -77.028333, title: 'Lima', click: function(e) { alert('You clicked in this marker'); }, infoWindow: { content: '<p>Home, sweet home...</p>' } } }); 


そして、すべて、すべて、すべて!

ライブラリは、静的マップの出力(画像として)、レイヤーのオーバーレイ、ルートのレイアウト、ポリゴンの描画、独自のコントロールの描画、GeoRSSなど、Maps APIのほぼすべての機能をサポートしています。

ライブラリのWebサイト( http://hpneo.github.com/gmaps/)を読み、作成を開始してください
そしてすぐにGithubのリポジトリをフォークします: https : //github.com/HPNeo/gmaps

UPD:原則として、Maps API ToSによると、 KidsKillaは、Googleの公式許可を得るまで、既存のAPIの上にラッパー (シェル)を作成する権利はないことを提案します。 ( https://developers.google.com/maps/terms、10.2節)。 開発者(Gustavo Leon)は、次の2つのことを行うと答えました。1)Googleに許可をリクエストする2) Google Maps APIだけでなくOpenStreetMapに接続するためのチケットが既に開かれている これは幸せです!

Source: https://habr.com/ru/post/J145152/


All Articles