mojigumi スポンサードリンク
最短コピペで完了!!!
ややこしすぎるGoogle Maps APIで1日ハマったので、備忘録。少し強引だが、5ステップでまとめてみた。複数のカスタムマーカーにも対応してるので、これさえあれば、どの地図でもほぼほぼカバーできるでしょう。ふーーー汗。大雑把に書いたので、今後時間あるときにでも見やすく清書したいと思います。
5ステップ
- GoogleAPI登録し、APIコードを取得する
- 下記HTMLコードの「あなたのGoogleMapsAPIコードをここ」にAPIコードペースト
- HTMLファイルをサーバーにアップ（オンラインのサーバーにアップすること。LAMP等のローカル環境NG）
- ブラウザでアクセスして、MAPが表示されればほぼ完成。あとはCSSとHTMLなど分解して自由にスタイリング。
- 経度、緯度、ズーム、センターポジション、などを調べ、lat、lng、zoom等に入力。（マーカーのカスタマイズなどはコードのコメント参照を。「あなたのURL」の箇所を修正し、マーカーアイコンが保存されたディレクトリを指定）
各ステップの詳細説明
1. GoogleAPI登録し、APIコードを取得する
上記リンクに行き、下記手順でAPI取得
- サイドバー > ダッシュボード
- APIを有効にする
- 検索フォームに「Google Static Maps API」と入力
- 「Google Static Maps API」選択
- 「有効にする」選択
- サイドバー > 認証情報
- 「認証情報を作成」> 「API」選択
- APIをメモ（これがAPIコード）
- APIに名前をつける
- 「アプリケーション制限タブ」でリファラー（API使用を許可するURL）を入力。この際、テストサイトURLもつけておく。
- API制限でMap API選び保存
- ⚠️マークが取れていれば5分で反映
注意点：API制限でテストサーバーやローカル許可しても、本サイトでないと反映されない
HTML内に追記（CSS含んでいるのでこれ一枚で完了）
下記コードをhead内にペースト（といいながら、すみません、これペーストしなくてもいいです。ペーストすると閉じタグないし、おかしいですね。なんだっけこれ…）
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true_or_false">
ポイント
- 「true_or_false」は、位置検知センサー（GPSなど）がある機器ではtrue、それ以外はfalse。
- iPhoneなどの地図を表示する場合はtrue、それ以外はfalse。
- PC用の地図ならfalse。
HTML（CSS含んでいるのでこれ一枚で完了）
<!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>
スポンサードリンク