webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

googlemaps を埋め込む

地図の中心に表示する座標を取得する

  • まず、必要な位置情報を取得する。
  • Geocoding - 住所から緯度経度を検索

  • 住所を入力すると、緯度経度を座標で教えてくれます。(googlemapsに値を代入しても誤差が生じる場合がある。googlemapsから値を取得するほうが思い通りになる。)
  • googlemapsに住所を入力する。

f:id:ohta-felica:20160702213217p:plain

  •  ペグを右クリックして、コンテクストメニューから「この場所について」を選ぶ。このとき、場所をきちんと特定できる縮尺まで地図を拡大しておく。

f:id:ohta-felica:20160702214153p:plain

  •  そうすると、緯度経度が表示される。この数字を記録しておく。

f:id:ohta-felica:20160702214430p:plain

google mapを表示する

  • 以下のサイトを参考にしました。基本的な構文はgoogleのサンプルを書き換えることで作ります。ちなみに公式、非公式問わず資料は山ほど検索できますが、この文章を作成した時点で以下の方法が1番楽だと思います。
  • Google Maps JavaScript API  |  Google Developers 

f:id:ohta-felica:20160703093127p:plain

  •  書換えてみると、概ね上手く行った。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>googlemaps</title>
<style>
html, body {
height: 100%; margin: 0; padding: 0;
}
#mapImg {
width: 600px;
height: 450px;
margin: 50px auto;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=_________&callback=initMap"> /*api keyを入力する*/
</script>
</head>

<body>
<div id="mapImg"></div>

<script>
function initMap() {
var styleArray = [
{
featureType: "all",
stylers: [
{ saturation: -100 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]; /*スタイルの定義*/


var map = new google.maps.Map(document.getElementById('mapImg'), {
center: {lat: 35.725963, lng: 139.713853}, /*地図の中心の緯度経度*/
styles: styleArray, /*上の行で定義したスタイルを適用、良い方法!*/
zoom: 16,
minZoom: 15
});
}
</script>
</body>
</html> 

f:id:ohta-felica:20160703094035p:plain

f:id:ohta-felica:20160703101514p:plain

f:id:ohta-felica:20160703101556p:plain

// JavaScript Document
function initMap() {

var styleArray = [
{
featureType: "all",
stylers: [
{ saturation: -100 },
{ gamma: 0.5 }
]
},{
featureType: "poi.business",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
}
];

var map = new google.maps.Map(document.getElementById('mapImg'), {
center: {lat: 35.697311, lng: 139.680114},/*地図の中心の緯度経度*/
styles: styleArray,/*上の行で定義したスタイルを適用*/
zoom: 17,
minZoom: 16,
disableDefaultUI: true
});

var markers = [] ;
markers[0] = new google.maps.Marker({
map: map ,
title: "CLOGO",
position: new google.maps.LatLng( 35.697352 , 139.678051 ) ,
label: {text: 'C', color: 'white'}//(アイコンにcと表示、文字の色は黒)
}) ;

f:id:ohta-felica:20160703150708p:plain

htmlの抜粋

  • </body>  閉じタグの直前に<script></script>を配置しました。そうしないと動作が不安定になります。

 <script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpZTrKJJz1Ht1ounoeaeoUTS2_BPoU7rw&callback=initMap">
</script>
<script src="js/googlemaps.js"></script>
</body>
</html>

レスポンシブにした時の問題点 (20160709追記)

  • pcの横長に対して、spは縦長なので、目的地を地図の中心にしないと両立しない。
  • spで、スワイプする動作でgooglemapsがどんどん動いてしまう。この動こを止めるためには、mapのオプションにスクリプトを付け加える。左右に動かせなくなるので、ズームコントロールの拡大縮小で対応できるようにする。
  • draggable: false,//ドラッグが効かないようにする。
    zoomControl: true, //縮尺コントーラーを有効化。