難解なGoogle Maps APIをややこしい説明なし5ステップで完了させる

スポンサードリンク

最短コピペで完了!!!

ややこしすぎるGoogle Maps APIで1日ハマったので、備忘録。少し強引だが、5ステップでまとめてみた。複数のカスタムマーカーにも対応してるので、これさえあれば、どの地図でもほぼほぼカバーできるでしょう。ふーーー汗。大雑把に書いたので、今後時間あるときにでも見やすく清書したいと思います。

5ステップ

  1. GoogleAPI登録し、APIコードを取得する
  2. 下記HTMLコードの「あなたのGoogleMapsAPIコードをここ」にAPIコードペースト
  3. HTMLファイルをサーバーにアップ(オンラインのサーバーにアップすること。LAMP等のローカル環境NG)
  4. ブラウザでアクセスして、MAPが表示されればほぼ完成。あとはCSSとHTMLなど分解して自由にスタイリング。
  5. 経度、緯度、ズーム、センターポジション、などを調べ、lat、lng、zoom等に入力。(マーカーのカスタマイズなどはコードのコメント参照を。「あなたのURL」の箇所を修正し、マーカーアイコンが保存されたディレクトリを指定)

各ステップの詳細説明

1. GoogleAPI登録し、APIコードを取得する

上記リンクに行き、下記手順でAPI取得
  1. サイドバー > ダッシュボード
  2. APIを有効にする
  3. 検索フォームに「Google Static Maps API」と入力
  4. 「Google Static Maps API」選択
  5. 「有効にする」選択
  6. サイドバー > 認証情報
  7. 「認証情報を作成」> 「API」選択
  8. APIをメモ(これがAPIコード)
  9. APIに名前をつける
  10. 「アプリケーション制限タブ」でリファラー(API使用を許可するURL)を入力。この際、テストサイトURLもつけておく。
  11. API制限でMap API選び保存
  12. ⚠️マークが取れていれば5分で反映

注意点:API制限でテストサーバーやローカル許可しても、本サイトでないと反映されない

HTML内に追記(CSS含んでいるのでこれ一枚で完了)

下記コードをhead内にペースト(といいながら、すみません、これペーストしなくてもいいです。ペーストすると閉じタグないし、おかしいですね。なんだっけこれ…)

[code]<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true_or_false">[/code]

ポイント
  • 「true_or_false」は、位置検知センサー(GPSなど)がある機器ではtrue、それ以外はfalse。
  • iPhoneなどの地図を表示する場合はtrue、それ以外はfalse。
  • PC用の地図ならfalse。

HTML(CSS含んでいるのでこれ一枚で完了)

[html highlight=”5-10,14,18-22,25-27,57″]
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API</title>
<style>
#Map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<!–HTMLに表示 –>
<div id=Map></div>
<!–Google Maps API –>
<script>
function initMap() {
var mymark = {lat: 35.67241, lng: 139.48073}; // 目的地
var park1 = {lat: 35.67295, lng: 139.48122}; // パーキング1
var park2 = {lat: 35.67122, lng: 139.48}; // パーキング2
var park3 = {lat: 35.67017, lng: 139.47816}; // パーキング3
var mycenter = {lat: 35.6716, lng: 139.4797}; // センターポジション

var map = new google.maps.Map(document.getElementById(‘Map’), {
zoom: 17, // ズーム値
center: mycenter,
scrollwheel: false // スクロールの有無
});

var marker = new google.maps.Marker({
position: mymark,
map: map,
animation: google.maps.Animation.DROP // ドロップアニメの有無
});
// カスタムマーカーは下記コメント参照
// var markerImg1 = {url: ‘http://www.moranbong.tokyo/images/icons/icon_parking.png’}; // カスタムマーカーの画像ファイルを指定
// icon: markerImg1 // カスタムマーカーの画像呼び出し
var iconBase = ‘https://maps.google.com/mapfiles/kml/shapes/’; // マーカーの画像ファイルを指定
var marker = new google.maps.Marker({
position: park1,
map: map,
icon: iconBase + ‘parking_lot_maps.png’ // マーカーの画像呼び出し
});
var marker = new google.maps.Marker({
position: park2,
map: map,
icon: iconBase + ‘parking_lot_maps.png’ // マーカーの画像呼び出し
});
var marker = new google.maps.Marker({
position: park3,
map: map,
icon: iconBase + ‘parking_lot_maps.png’ // マーカーの画像呼び出し
});
}
</script>
<!–Google Maps API – CODE –>
<script src="https://maps.googleapis.com/maps/api/js?key=あなたのGoogleMapsAPIコードをここに&callback=initMap" async defer></script>
</body>
</html>
[/html]

スポンサードリンク

この記事を書いた人

mojigumi

mojigumiの代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします