Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers ■目次 Google マップの表示 Google マップにマーカーを立てる マーカーに吹き出しを追加する 住所から緯度と経度を調べる Google マップに複数のマーカーを立てる 1. Google マップの表示 まずは地図を埋め込んでみます。 実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。 APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。 1-1. 地図を埋め込む場所を指定 ■HTML <div id="sample"></div> 1-2.
こんにちは。まろCです。 今回は、サイト内のgoogle mapに複数のカスタムピンとポップアップの情報を載せる方法を、実例をもとに紹介していきたいと思います。 その方法を利用して制作した案件 https://www.guidoor.jp/ 今回実例として取り上げるのは、「観光スポットにある案内板と連動して情報を取得する」という新しい試みを取り入れた、多言語対応の観光情報サイトです。僕はフロントエンドエンジニアとして制作に関わらせていただきました。 https://www.guidoor.jp/city/mishima/ たとえばこのページでは、各市の観光スポットを一覧確認できます。その情報を地図上でも追えるように、google map上にカスタムされたピンを落としています。 データの用意 複数データを動的に作成するため、htmlでは以下のようにリストを作ります。 <div id="js-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く