GoogleマップAPIとjQueryの記事を使用してマップにマーカーを追加する

Googleマップコードの場合、Googleサーバーに直接リンクできます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

センサー= falseパラメーターは、ユーザーの位置を決定するためにセンサー（GPSロケーターなど）を使用したくないことを指定します。

基本的なライブラリがあるので、機能の構築を開始できます。 スクリプトのアウトライン

マップコードのスケルトンから始めましょう：

MyMapと呼ばれるJavaScriptオブジェクト内のすべてのマップ機能をパッケージ化しています。これは、ページ上の他のスクリプトとの潜在的な競合を回避するのに役立ちます。オブジェクトには、2つの変数と2つの関数が含まれています。マップ変数は、作成されるGoogleマップオブジェクトへの参照を保存し、Bounds変数はすべてのマーカーを含む境界ボックスを保存します。これは、すべてのマーカーを追加した後、マップがすべて同時に見えるようにマップをズームしたいときに役立ちます。

メソッドの場合：INITはページに要素を見つけ、特定のセンターとズームレベルを備えた新しいGoogleマップとして初期化します。一方、PlaceMarkersはXMLファイルの名前を取得し、そのファイルからの調整データにロードして、マップに一連のマーカーを配置します。

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

マップのロード

基本的な構造が整ったので、init機能を書きましょう：

メソッドに渡されたパラメーターを使用して、オプションのセットを含むオブジェクトリテラルを作成します。次に、Google Maps API（マップとlatlngbounds）で定義されている2つのオブジェクトを初期化し、この目的のために以前に設定したMyMapオブジェクトのプロパティに割り当てます。

マップコンストラクターには、ページ上のマップとして使用するDOM要素と一連のオプションが渡されます。すでに準備したオプションですが、DOM要素を取得するには、渡されたセレクター文字列を取得し、jQuery $関数を使用してページ上のアイテムを見つけます。 $は生のDOMノードではなくjQueryオブジェクトを返すため、[0]を使用してドリルダウンする必要があります。これにより、「裸の」DOMノードにアクセスできます。ページにマップを表示し、マーカーを追加するときに拡張する準備ができている空の境界ボックスを持っています。

マーカーの追加

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

それといえば、プレースマーカーの関数を見てみましょう：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

この関数はもう少し複雑ですが、理解するのは簡単です。最初に、jQueryの$ .getメソッドを呼び出して、Ajax Getリクエストを実行します。このメソッドには、リクエストするURL（この場合はローカルXMLファイル）と、リクエストが終了したときに実行するコールバック関数の2つのパラメーターが必要です。その関数は、次に、リクエストへの応答に合格されます。この場合、この場合はXMLになります。

jQueryはXMLをHTMLとまったく同じ扱います。したがって、$（xml）.find（ 'marker'）。それぞれ。

マーカーの名前とアドレスをつかみ、それぞれに新しいlatlngオブジェクトを作成し、ポイント変数に割り当てます。境界ボックスをそのポイントを含めるように拡張し、マップ上のその場所にマーカーを作成します。

ユーザーがそれらのマーカーをクリックするたびにツールチップバブルを表示したいので、場所の名前とアドレスを含めることを望みます。 したがって、Maps API Event.AddListenerメソッドを使用して、各マーカーにイベントリスナーを追加する必要があります。ただし、それを行う前に、ツールチップ自体を作成します。 Google Maps APIでは、このタイプのツールチップはInfowindowと呼ばれます。そこで、新しいInfowindowを作成し、必要な情報を入力するためにHTMLを設定します。次に、イベントリスナーを追加します。リスナーは、マーカーの1つがクリックされるたびに発射され、両方ともInfowindowのコンテンツを設定して開きます。

最後に、すべてのマーカーとそれに関連するイベントハンドラーとInfowindowを追加した後、Maps APIのFitBoundsメソッドを使用してマップをマーカーに適合させます。 それを渡す必要があるのは、各マーカーを含めるように拡張してきた境界オブジェクトだけです。このように、マップがどこでズームされたりパンされたりしても、すべてのマーカーを含む理想的なズームレベルに常にスナップします。

すべてを結び付けます

コードの準備ができたので、それを実行してみましょう。 jqueryの$（ 'document'）を使用します。ページが読み込まれるまで待機してから、マップを初期化し、#mapセレクター文字列を使用してマップのIDを使用してページ要素を指しています：

また、クリックイベントリスナーを#showmarkersボタンに添付します。そのボタンがクリックされると、XMLファイルにURLを使用してPlaceMarkers関数を呼び出します。スピンして、マップに一連のカスタムマーカーが表示されます。ここで説明しましたので、可能なすべてのことを感じるためにドキュメントをチェックしてください。

この投稿を読んで楽しんだなら、あなたは学ぶことができるのが大好きです。マスターから新鮮なスキルとテクニックを学ぶ場所。メンバーは、Jquery FundamentalsのようなすべてのSitePointの電子ブックやインタラクティブなオンラインコースに即座にアクセスできます。 Google Maps APIに関するよくある質問（FAQ）

Google Maps APIをjQueryと統合するにはどうすればよいですか？

​​

Google Maps APIとjQueryの統合には、いくつかのステップが含まれます。まず、GoogleマップAPIスクリプトをHTMLファイルに含める必要があります。次に、JavaScriptファイルのマップを初期化する必要があります。 jQueryを使用して、マップを表示するHTML要素を選択できます。次に、Google Maps APIメソッドを使用して、ニーズに応じてマップをカスタマイズできます。 「Your_api_key」をスクリプトタグの実際のAPIキーに置き換えることを忘れないでください。マップ。ズームレベルを設定し、特定の場所にマップを集中し、表示するマップのタイプを選択できます。マーカー、情報ウィンドウ、イベントリスナーをマップに追加することもできます。これらのカスタマイズはすべて、マップを初期化するJavaScriptファイルで実行できます。 .maps.markerクラスとコンストラクターの位置とマップオプションを指定します。位置オプションは、マーカーの地理的座標を表すGoogle.maps.latlngオブジェクトである必要があります。マップオプションは、マーカーを表示するマップを表すGoogle.maps.mapオブジェクトである必要があります。 Google.maps.infowindowクラスの新しいインスタンスを作成し、コンストラクターのコンテンツオプションを指定することにより、マーカー。コンテンツオプションは、情報ウィンドウに表示されるHTMLコンテンツを表す文字列である必要があります。次に、マーカーがクリックされたら、情報ウィンドウオブジェクトの開く方法を使用して情報ウィンドウを表示できます。 Google.maps.EventクラスのAddListenerメソッドを使用して、マーカーに追加されました。 AddListenerメソッドの最初の引数はマーカーオブジェクトである必要があり、2番目の引数はイベントの名前であり、3番目の引数はイベントが発生したときに実行される機能である必要があります。表示されているマップのタイプ？

表示されるマップのタイプは、マップオブジェクトのMapTypeIDオプションを設定することで変更できます。 MapTypeIDオプションは、Google.maps.maptypeid.roadmap、google.maps.maptypeid.satellite、google.maps.maptypeid.hybrid、またはgoogle.maptypeid.terrain。マップのズームレベルを設定するにはどうすればよいですか？

マップオブジェクトのズームオプションを設定して設定できます。ズームオプションは、ズームレベルを表す数字である必要があります。数が高いほど、ズームが近づきます。

特定の場所でマップを中央に配置するにはどうすればよいですか？

マップの中心オプションを設定することにより、マップを特定の場所に中央に置くことができます。物体。センターオプションは、場所の地理的座標を表すgoogle.maps.latlngオブジェクトである必要があります。

GoogleマップのAPIキーを取得するにはどうすればよいですか？ Google Cloud Platform Consoleから入手してください。新しいプロジェクトを作成し、GoogleマップJavaScript APIを有効にし、新しいAPIキーを作成する必要があります。 google.maps.eventクラスのadddomlistenerメソッドを使用して処理されます。 AddDomilistenerメソッドの最初の引数はウィンドウオブジェクトである必要があります。2番目の引数は「エラー」イベントであり、3番目の引数はエラーが発生したときに実行される関数である必要があります。

以上がGoogleマップAPIとjQueryの記事を使用してマップにマーカーを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。