ブログ

2018.04.24

google map 設置&応用編
google map 設置&応用編

Web制作ホームページ制作関連

 

こんにちは。制作部の神谷です。

今回も前回に引き続き、ホームページ制作では必須のgoogle mapについて書こうと思います。

前回は、簡単に設置できる方法と、APIキーを取得・設定するところまでを書きました。

google map 簡単設置&設定編

では、前回取得したAPIキーで実際に自分のホームページに設置してみましょう。

まずは一番ベーシックな一枚の大きな地図を読み込む方法です。

 

最初にすることは、前回取得したキーをホームページに読み込ませることです。

ページの表示したい箇所にマップを表示するための空のボックスを作ります。

<div id=”map01″></div>

そのすぐ下にAPIキーを読み込みます。

<script src=”//maps.googleapis.com/maps/api/js?key={APIキー} ” ></script>

 

Mapの大きさなどはcssで調整をします。

#map{

width: 100%;

height: 300px;

border: none;

}

※表示のためにはheightの指定が必須です。

 

これで表示の下準備が完了しました。

次に、JavaScriptで地図にマーカーの場所や中心地を指定します。

<script>

(function(){

“use strict”;

var map = new google.maps.Map(document.getElementById(‘map01’), {

center: { lat: 35.413282, lng: 136.757937 },

zoom: 15

});

}());

</script>

この記述は先ほど読み込んだAPIキーの記述の直下などに置きます。

.getElementByIdで先ほど作ったボックスのIDであるmap01を指定し、centerで地図の中心を指定します。

Latは緯度を表し, lngは経度を表しているので、表示したい位置の数値を入力します。

緯度経度の数値はGooglemapの中で調べることができます。

このように、中心にしたい場所を表示したら、その場所で右クリック→「この場所について」をクリックすると画面下側に小さいボックスが出てきます。

そのボックスの下部、地名などの情報の下に薄くグレーで緯度経度が表示されます。

その数値を利用します。

最後にzoom値を設定します。

これはその名の通り、地図のズーム値ですので、数値を大きくすれば拡大、小さくすれば縮小されます。

これで id=”map01” を指定したボックスにマップが表示されます。

しかし、これだけでは何を見せたい地図なのかわかりません。

続いてここにお店の位置や目的地を表示するマーカーを立てていきます。

 

<script>

(function(){

“use strict”;

var map = new google.maps.Map(document.getElementById(‘map01’), {

center: { lat: 35.413282, lng: 136.757937 },

zoom: 15

});

var marker = new google.maps.Marker({

position: { lat: 35.413282, lng: 136.757937 },

map: map01

});

 

}());

</script>

 

var markerからがマーカーの指定の記述になります。

Positionでマーカーの位置を指定します。

中心を指定したときと同じように、マーカーを置きたい位置の緯度経度を記述します。

そしてその下のmap: map01で、マーカーを置く地図の指定をします。

これでよく見るデフォルトの地図の設置ができました。

 

あとはマーカーの表示の変更など、カスタマイズをして個性を出していきます。

 

<script>

(function(){

“use strict”;

var map = new google.maps.Map(document.getElementById(‘map01’), {

center: { lat: 35.413282, lng: 136.757937 },

zoom: 15,

disableDefaultUI: true

});

var marker = new google.maps.Marker({

position: { lat: 35.413282, lng: 136.757937 },

icon: “img/map-icon.png”,

map: map

});

 

}());

</script>

 

ここで増えた記述はdisableDefaultUI: trueとiconです。

iconはその名の通り、地図のマーカーを任意のアイコンに変える事ができます。

お店のロゴなどになっているのをよく見かけますね。

disableDefaultUI: trueについては、googlemap上のコントロールをすべて非表示にするものです。

デフォルトでは、拡大縮小、ストリートビューなどのコントローラーが配置されていますが、それらをすべて非表示にすることができます。

これにより、スッキリとした地図を表示できますが、ホームページを訪れる人によっては「使い勝手が悪い」と感じるかもしれません。使う場合はそのあたりに配慮しましょう。

また、このコントロールはそれぞれ一つずつの表示/非表示も制御できますので、用途に合わせて使い分けてみましょう。

 

さて、ここまで来たら、一度自分の地図を見てみましょう。

指定したアイコンでカスタマイズされたオリジナルの地図が表示されているでしょうか?

ここまでできれば基本は完了です。

ここからはちょっと応用に入ります。

 

*マーカーを複数立てる

先ほど出てきた

var marker = new google.maps.Marker({

position: { lat: 35.413282, lng: 136.757937 },

icon: “img/map-icon.png”,

map: map

この記述のmarkerの部分をmarker1、marker2などにすることで、複数のマーカー設置ができます。

 

*地図を複数設置する

また、

var map = new google.maps.Map(document.getElementById(‘map01’), {

center: { lat: 35.413282, lng: 136.757937 },

zoom: 15

のIDの部分「map01」も01、02など重複しない名前にすることで、地図自体も複数設置することができます。

この場合は設置するHTML側のdivをわすれないようにしましょう。

 

以上、この2つを組み合わせると…

このように様々な場所を1ページに表示する、という事ができるようになります。

これで世界中にお店があっても対応できますよ!笑

 

さて、二回にわたりGooglemapについての記事を書きましたが、googlemapはマーカーにアニメーションをつけたり、色を変えたりとまだまだたくさんのカスタマイズができます。

ぜひ自分だけのこだわりの地図を作ってみてください。

お問い合わせ

メールフォームからの
お問い合わせ