何はともあれ動かしてみる
先に実行結果をご覧ください。
上の画像のように、LIGがある上野駅周辺の地図が表示されるものを作ってみます。
まずはコピペしてみましょう！
何かのライブラリを使ってみるときは、ちゃんと導入する前に「まずは少し試してみよう」と思いますよね。そんなときにはコピペでカンタンに動かせるコードが入門におすすめです。
以下のコードをまるっとコピペして任意のhtmlファイルを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>gmapsサンプル</title>
<style>
@charset "utf-8";
#map {
height: 400px;
}
</style>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
<script>
window.onload = function(){
var map = new GMaps({
div: "#map",
lat: 35.710285,
lng: 139.77714,
zoom: 15,
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>どうでしょう、動きましたでしょうか？
すごくカンタンにGoogle Mapsを自分のサイトに表示させることができましたね。
覚えやすいプロパティ
- div: 地図を描画する要素
- lat: 地図の中心点となる緯度
- lng: 地図の中心点となる経度
- zoom: 地図を表示する際の縮尺。値が大きい程、拡大して表示されます。
次はもう少し発展的な内容を試してみます。
任意の地点に画像マーカーを設置してみる
Google Mapsでは指定したポイントにピンのマーカーがつきますが、gmaps.jsならマーカーを任意の画像に変更することができます。
練習として、LIGの新しくなったロゴを地図上のLIG住所にマッピングしてみましょう。
※13行目のgmaps.jsは外部から取得ではなくてダウンロードして設置する形にしました。直接アクセスは負荷がかかるのでこの方法がおすすめです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>gmapsサンプル</title>
<style>
@charset "utf-8";
#map {
height: 400px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="./gmaps.js"></script>
<script>
window.onload = function(){
var lat = 35.710285;
var lng = 139.77714;
var map = new GMaps({
div: "#map",
lat: lat,
lng: lng,
zoom: 17
});
map.addMarker({
lat: lat,
lng: lng,
title: "LIG",
icon: "http://i.gyazo.com/0f00ed1cff497b7390020f9e64e31674.png",
infoWindow: {
content: "<p>LIGは<br/>ココだよ!</p>"
}
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>結果はこうなりました。
これもとてもカンタンに表示できましたね。あまり手間がかからないので、いろいろなサイトに組み込みやすいと思います。
おまけ：geocodingというサイトが便利！
座標を指定したいのに住所しか分からない……というケースは多いのではないでしょうか。そんなときはgeocodingを使って、住所を座標に変換しましょう。
gmaps.jsにもgeocoading機能はありますが、その機能を実装していないときにも便利です。
http://www.geocoding.jp/?q=東京都台東区東上野2−18−7にアクセスすると“東京都台東区東上野2−18−7”の座標を表示してくれます。
まとめ
いかがでしたでしょうか？
個人的にGoogle MapsのAPIは使いにくかった印象があり、今まで地図の実装に苦手意識があったのですが、gmaps.jsを使ってみてこんなに使いやすいのかと感動しています。
これからは地図に強い男というブランディングで頑張っていこうと思います。これでドライブ好きな女子にモテモテですね。
……冗談抜きにしても、gmaps.jsはGoogle Mapsを使うときだけにとどまらず、位置情報を利用する際にはチェックしておきたいライブラリだと思いました。こういうライブラリの発見はテンションが上がりますね。Web制作者の味方です。
これを超えるライブラリがあれば誰か紹介してください。それでは！
参考：gmaps.js
http://hpneo.github.io/gmaps/
参考：gmaps.jsで簡単グーグルマップ
http://php-fan.org/gmapsjs.html
参考：gmaps.jsで簡単グーグルマップ
http://k1blog.com/web/web-create/post-4408/
LIGでは、エンジニアを絶賛募集中！
https://liginc.co.jp/recruit/mid_career
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
