Googleマップ埋め込みカスタマイズでのスマホ対策、デザイン変更方法。

SHARE

Googleマップ埋め込みカスタマイズでのスマホ対策、デザイン変更方法。

今日はWebデザイン、HTMLコーディングについてです。ホームページにGoogleマップを埋め込むのはとても簡単ですが、少しの手を加えることで劇的なカスタマイズが出来るということをご存知でしょうか?? 方法は簡単。以下のコードをサイトにコピペしてみてください。

コード
<div id="map" style="width: 100%; height: 400px;"></div>
<div id="map" style="width: 100%; height: 400px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi/"></script>
<script type="text/javascript">google.load('maps', '3.x', { 'other_params': 'sensor=false'});

//マップの初期設定function initialize() { //マップの中心座標 var myLatLng = new google.maps.LatLng(35.666051, 139.736779);

//マップの設定オプション
var myOptions = {
zoom: 18, //ズームレベル
center: myLatLng, //中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP, //マップタイプ
disableDoubleClickZoom: true, //ダブルクリックでの移動を無効化
scrollwheel: false //ホイールでの移動を無効化
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

var samplestyle = [{
stylers: [{hue: '#ff00a1'}]}];

var sampleMapType = new
google.maps.StyledMapType(samplestyle, {}); map.mapTypes.set('sample', sampleMapType); map.setMapTypeId('sample');
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';var marker = new google.maps.Marker({  position: myLatLng,  map: map,  icon: iconBase + 'schools_maps.png'});
}

//作成したマップの呼び出しgoogle.setOnLoadCallback(initialize);
</script>

 

すると以下のようなマップの表示が現れると思います。

 

  完成系はこんな感じです。 何が違うのかと言うと、

  • マップ上のスクロール操作が無効になっている
  • マップの色が変わっている
  • マーカーのアイコンが変わっている

の3点です。 ここからカスタマイズして目的地の住所や色調、アイコン画像を変更していきます。    

まずは目的地を設定

目的地を設定するには

コード
var myLatLng = new google.maps.LatLng(35.666051, 139.736779);

の中の数字の箇所を変更するだけでOK。   ここの数字はその地点の土地番号を示しているのですが、目的地の土地番号を調べる方法は以下の通りです。

Googleマップでの作業:

  1. 目的地にカーソルを合わせて右クリック
  2. 「この場所について」をクリック
  3. すると建物の名前と、土地番号が現れます

 

色を変更する

色を変更するには以下のカラーコードの箇所を変更します。

コード
var samplestyle = [{
		stylers: [{
			hue: '#ff00a1'
		}]
	}];

3行目のカラーコードを変更します。

 

マーカーのアイコン画像を変更する

マーカーのアイコンを変更するには、以下のコードを編集します

コード
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'schools_maps.png'
});

1行目と5行目を見ていただければ分かりますが、ここがアイコンの画像のURLパスになっています。 ここを自分がアップロードしたアイコン画像のURLに変更すればOKです。    

スマホ対策に有効!

以上でカスタマイズは完了ですが、一番の肝はマップ上のスクロール操作が無効にしたことです。 これはスマホやMACのトラックパッドを利用するユーザーによって、ユーサビリティ上かなり重要です。  

通常Googleマップの上でスクロール動作をすると地図の拡大縮小が行われるためにスクロールがそこで止まってしまって邪魔になりますが、今回のカスタマイズによりそれを防ぐことができます。これはでかい。

以上です!

カスタマイズしていきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です