設置&応用編Web制作ホームページ制作関連こんにちは。mapについて書こうと思います。前回は、簡単に設置できる方法と、APIキーを取得・設定するところまでを書きました。簡単設置&設定編では、前回取得したAPIキーで実際に自分のホームページに設置してみましょう。ベーシックな一枚の大きな地図を読み込む方法です。最初にすることは、前回取得したキーをホームページに読み込ませることです。ページの表示したい箇所にマップを表示するための空のボックスを作ります。id=”map01′′></div>そのすぐ下にAPIキーを読み込みます。></script>Mapの大きさなどはcssで調整をします。none;}※表示のためにはheightの指定が必須です。これで表示の下準備が完了しました。次に、JavaScriptで地図にマーカーの場所や中心地を指定します。15});}());</script>この記述は先ほど読み込んだAPIキーの記述の直下などに置きます。.getElementByIdで先ほど作ったボックスのIDであるmap01を指定し、centerで地図の中心を指定します。lngは経度を表しているので、表示したい位置の数値を入力します。緯度経度の数値はGooglemapの中で調べることができます。このように、中心にしたい場所を表示したら、その場所で右クリック→「この場所について」をクリックすると画面下側に小さいボックスが出てきます。そのボックスの下部、地名などの情報の下に薄くグレーで緯度経度が表示されます。その数値を利用します。最後にzoom値を設定します。これはその名の通り、地図のズーム値ですので、数値を大きくすれば拡大、小さくすれば縮小されます。指定したボックスにマップが表示されます。これだけでは何を見せたい地図なのかわかりません。続いてここにお店の位置や目的地を表示するマーカーを立てていきます。markerからがマーカーの指定の記述になります。Positionでマーカーの位置を指定します。中心を指定したときと同じように、マーカーを置きたい位置の緯度経度を記述します。map01で、マーカーを置く地図の指定をします。これでよく見るデフォルトの地図の設置ができました。あとはマーカーの表示の変更など、カスタマイズをして個性を出していきます。trueとiconです。iconはその名の通り、地図のマーカーを任意のアイコンに変える事ができます。お店のロゴなどになっているのをよく見かけますね。trueについては、googlemap上のコントロールをすべて非表示にするものです。デフォルトでは、拡大縮小、ストリートビューなどのコントローラーが配置されていますが、それらをすべて非表示にすることができます。これにより、スッキリとした地図を表示できますが、ホームページを訪れる人によっては「使い勝手が悪い」と感じるかもしれません。使う場合はそのあたりに配慮しましょう。このコントロールはそれぞれ一つずつの表示/非表示も制御できますので、用途に合わせて使い分けてみましょう。ここまで来たら、一度自分の地図を見てみましょう。指定したアイコンでカスタマイズされたオリジナルの地図が表示されているでしょうか?ここまでできれば基本は完了です。ここからはちょっと応用に入ります。mapこの記述のmarkerの部分をmarker1、marker2などにすることで、複数のマーカー設置ができます。15のIDの部分「map01」も01、02など重複しない名前にすることで、地図自体も複数設置することができます。この場合は設置するHTML側のdivをわすれないようにしましょう。以上、この2つを組み合わせると...このように様々な場所を1ページに表示する、という事ができるようになります。これで世界中にお店があっても対応できますよ!笑さて、二回にわたりGooglemapについての記事を書きましたが、googlemapはマーカーにアニメーションをつけたり、色を変えたりとまだまだたくさんのカスタマイズができます。自分だけのこだわりの地図を作ってみてください。まで一気通貫した完全オーダーメイドのWebコンサルティング。お客様のビジネスゴールに向けた戦略的コンサルティングを行います。ホームページ制作キレイなだけじゃない競合分析・サイト設計から更新・運用までトータルサポート。Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。あなたのサイトを丸裸にWebサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。最新情報をお届けメールアドレスを登録していただくと、おすすめ情報やアクシスブログの更新情報をお届けいたします。058-267-1430URL:https://www.axis-corp.com/お問い合わせはこちら私達は、お客様のインターネットからの売上・利益を最大化させるネット技術のプロフェッショナル集団です。WEBコンサルティング、集客、解析、ホームページ制作などさまざまなサービスを用いて、お客様にとって最適な状態を導き出します。すべてのお客様に、一流の結果をご提供いたします。CORPORATION。