web memorandum

やっておくこと

1. Google APIキーの取得（Google Maps Embed API）
2. Google API Conslie で「Google Maps JavaScript API」の有効化※やっとかないと動かない
3. head部分でAPIキーを読み込んでおく。

   <script src="//maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

やることの流れ

1. スタイルシートに追加

   div#googlemaps {
   width:100%;
   height:300px;
   position:relative;
   }

   横幅100%じゃ困るんじゃいって時！

   div#googlemaps {
   max-width:650px;/* 好きな数字に */
   height:300px;
   position:relative;
   }

2. .jsファイルを用意gmap.jsとかにしてるよ。あとこれをheadで読み込んでね。

   function initialize() {
   var latlng = new google.maps.LatLng(35.681298, 139.7662469);
   var myOptions = {
   zoom: 18,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.LOADMAP,
   scrollwheel: false,
   disableDefaultUI: false,
   };
   var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
   var lopanMarker = new google.maps.Marker({
   position: latlng,
   map: map,
   });
   google.maps.event.addDomListener(window, "resize", function() {
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center);
   });
   var styledMapOptions = { name: '東京駅' }
   }
   google.maps.event.addDomListener(window, 'load', initialize);

   参考：【Responsive Google Maps】ウィンドウをリサイズしてもピンが中央からズレないようにする方法

   マップのピン（マーカー）をオリジナルのにしたいぞい！って時はこれ。

   function initialize() {
   var latlng = new google.maps.LatLng(35.681298, 139.7662469);
   var myOptions = {
   zoom: 16,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.LOADMAP,
   scrollwheel: true,
   disableDefaultUI: false,
   };
   var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
   var image = {
   url : '画像のURL',
   scaledSize : new google.maps.Size(60, 60)//任意のサイズで！
   }
   
   var lopanmarker = new google.maps.Marker({
   position: latlng,
   map : map,
   icon : image,
   title : "東京駅"
   });
   
   google.maps.event.addDomListener(window, "resize", function() {
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center);
   });
   var styledMapOptions = { name: '東京駅' }
   }
   google.maps.event.addDomListener(window, 'load', initialize);

   
   実際にマーカーの画像を作るときは「new google.maps.Size(60, 60)」の倍：120px*120pxで作る！
   その方が高解像度なスマホでも鮮明で綺麗！

3. マップを置きたいところにdivタグを挿入

   <div id="googlemaps"></div>

   多分これでスマホで見てもブラウザのサイズをギュイギュイ変えてもピンがど真ん中に来るGoogleマップが作れているはずです。

なんか今はこんなことしなくてもスマホで中央寄せされるみたいですね。
良い世の中になったね。（2018/1/24）