【GM】ピン付きのGoogleMapを表示

# **目的**

表示するGoogleMapのピンの位置やズームレベルなど細かい設定をすることが目的です。

単純にGoogleMapをWebページに埋め込むなら、GoogleMap上で場所を検索し「共有」から「地図を埋め込む」に記述されているコードを貼り付けるのが一番簡単です。

今回のようにJavaScriptを使って地図を表示するメリットは、マウスホイールでの拡大・縮小の有無や地図の縮尺の表示など細かい設定が行えることです。

緯度・経度で場所を指定できるため、GoogleMapにまだ登録されていない番地や場所にもピンを表示できることが可能です。

緯度・経度を調べる方法は、GoogleMap上でピンを表示したい位置で右クリックして「この場所について」を選ぶことで、確認することができます。

# **1. GoogleMapsAPIを読み込む**

> **2016.7.13 追記**
> 2016年6月22日付けでAPIキーが必須になりました。
> 今後、下記で紹介したAPIキーを取得していない方法を試してもグレーの背景に感嘆符が表示され、エラーになります。
> 過去に設置したGoogleMapは、追記時点では問題なく表示されています。
> 新規で設置する場合は、APIキーを取得してください。
> 
> 今回の改定内容については下記をご覧ください。
> ・[Google Maps API の標準プランを改定しました](http://googleforwork-japan.blogspot.jp/2016/07/google-maps-api.html)
> 
> APIキーの取得方法については下記をご覧ください。
> ・[GoogleマップのAPIキーのエラーが出る時の対処法](http://blog.cloud9works.net/web/how-to-fix-google-map-api-key-error/)

##~~APIキーを取得していない場合~~

~~APIキーがなくても表示されますが、今後APIキーが必須となったときに表示されなくなる可能性があります。~~

```html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
```

※上述した通り、APIキーが必須になりました。

##APIキーを取得した場合

読み込むときに位置情報を取得するかなどのパラメータの設定を行えます。
パラメータありとなしで記述の仕方が異なります。
下記の`xxxxxxxxxxxxxxxxx`の箇所をAPIキーに変更してください。

```html:パラメータなし
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxx"></script>
```

```html:パラメータあり
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=xxxxxxxxxxxxxxxxx"></script>
```

###sensorパラメータについて

>Google Maps APIを使って作成するアプリケーションが位置情報を取得する必要がある場合はtrue、そうでない場合はfalseを指定して下さい。

引用元：[センサーのパラメータ指定 - Google Maps API入門](http://www.ajaxtower.jp/googlemaps/charset/index4.html)

# **2. GoogleMapの設定を記述**

htmlファイルに直接記述するか、外部ファイルに記述して読み込む。

```html
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('google-map'); //IDを入力
    var myOptions = {
        zoom: 15, //ズームのレベルを指定。数値が小さいほど、より広域に表示
        center: new google.maps.LatLng(35.685175,139.752799), //表示の基点となる緯度経度を入力
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true, //地図の縮尺（200mとかの目盛）。デフォルトは無効。
		scrollwheel: false, //マウスホイールでの拡大・縮小を無効
    };
    var map = new google.maps.Map(mapdiv, myOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(35.685175,139.752799), //ピンの緯度経度を入力
            map: map, 
            title: "皇居" //ピンにマウスカーソルを乗せたときに表示されるタイトルを入力
        });
});
</script>
```

# **2. GoogleMapの設定を記述（色調整ver）**

GoogleMapの色を調整したい場合はこちらを記述。

```html
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('google-map'); //IDを入力
    var myOptions = {
        zoom: 15, //ズームのレベルを指定。数値が小さいほど、より広域に表示
        center: new google.maps.LatLng(35.685175,139.752799), //表示の基点となる緯度経度を入力
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true, //地図の縮尺（200mとかの目盛）。デフォルトは無効。
        scrollwheel: false, //マウスホイールでの拡大・縮小を無効
        styles: [{
            stylers: [{//色合いを設定
                hue: "#2985f5"},//カラーコード
            {   gamma: 1.50},//ガンマ値
            {   saturation: -100}]}]//彩度 -40
    };
    var map = new google.maps.Map(mapdiv, myOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(35.685175,139.752799), //ピンの緯度経度を入力
            map: map, 
            title: "皇居" //ピンにマウスカーソルを乗せたときに表示されるタイトルを入力
        });
});
</script>
```

# **3. マップを表示したい箇所にIDを指定**

2で記述した同じID名をhtmlファイルに記述してください。
マップの表示幅や高さなどはCSSで指定してください。

```html
<div id="google-map"></div>
```

# **参考サイト**

オプションを追加することで、細かい設定が可能です。

+ [Google Maps APIの基本 - Google Maps API入門](http://www.ajaxtower.jp/googlemaps/charset/)
+ [Google Maps JavaScript API v3｜Google Maps JavaScript API v3｜Ajax｜PHP &amp; JavaScript Room](http://phpjavascriptroom.com/?t=ajax&p=googlemapsapiv3)
+ [Geocoding - 住所から緯度経度を検索](http://www.geocoding.jp/)