グーグルマップを簡単に表示させてくれるツールのご紹介です。もうバージョンはV3に移行しないとV2だと表示されないので注意が必要ですね。
グーグルマップって意外と記述に手間がかかるんですけどこれを使うことでさくっと表示させて有効利用しちゃいましょうー
http://hpneo.github.io/gmaps/
コチラからgmaps.jsをダウンロードします。
スポンサーリンク
head部分に
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="gmaps.js"></script> |
とjqueryとgooglemapのAPIをgmapsのパスを通しておきます。
まず、単純に表示だけの場合は下記のように記述すればOK！場所は都庁です。
<script type="text/javascript"> var map; $(document).ready(function(){ map = new GMaps({ div: '#map', lat: 35.689161, lng: 139.691781, zoom:16 }); }); </script> <div id="map"></div> |
グーグルマップで都庁を中心として表示させます。あとは
#mapで表示させます。
簡単ですねー。
以下全文
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Gmaps</title> </head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="gmaps.js"></script> <script type="text/javascript"> var map; $(document).ready(function(){ map = new GMaps({ div: '#map', lat: 35.689161, lng: 139.691781, zoom:16 }); }); </script> <style> #map { width: 95%; height:500px; } </style> <body> <div id="map"></div> </body> </html> |
ピンも配置させてみます。１つじゃなく2つ配置してみましょー
<script type="text/javascript"> var map; $(document).ready(function(){ map = new GMaps({ div: '#map', lat: 35.689161, lng: 139.691781, zoom:16 }); map.addMarker({ lat: 35.689161, lng: 139.691781, title: 'Lima', click: function(e) { alert('You clicked in this marker'); } }); map.addMarker({ lat: 35.690659, lng: 139.699978, title: 'Marker', infoWindow: { content: '<p>HTML Content</p>' } }); }); </script> |
これで完璧！！
これをベースに検索して緯度経度がわかるものを作ってみました。
そのほかいろいろとサンプルがあるので実際に試してみるのも面白いと思います。位置情報を取得したり、ルート案内したり、グーグルマップを画像にしたりと様々な見せ方がありますので是非是非参考に見て下さい！
デモサイトは検索した住所から緯度経度の値がわかるようにしました。
1件のコメント