Google maps API

maps API の説明

GeoCodingAPI　⇒　住所と緯度経度を変換するAPI
PlacesAPI　⇒　Userの現在地情報を取得するAPI

scriptの読み込み

<script src ="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=your key&callback=initMap&libraries=places"></script>

GroCodingの有効化

1.path

ダッシュボード移動

2.ダッシュボード

APIとサービスの有効化をクリック

3.API一覧

左側のmapsをクリック

4. GeoGodingをクリック

codeing

initMap()

function initMap(){
    'use strict';
}

map

オブジェクト生成

new google.maps.Map(DOM要素,{
    center: {lat:...,lng...},
    zoom:...
});

中心位置

緯度経度を持たせたオブジェクトを設定する

center: {lat: 35.681167, lng: 139.767052}

縮尺

0が世界地図単位で15がいい感じに表示が出来る

zoom: 0~18

画面のUIを全て削除する

disableDefaultUI: default

画面移動

map.panTo(new google.maps.LatLng(lat, lng));

sources

/**
* geocodeを使って住所から緯度と経度を取得する
*/
serach.addEventListener('click', function(){
     geocoder.geocode({
         address: document.getElementById('address').value
     }, function(results, status) {
         if(status !== 'OK'){
             alert('Failed:' + status);
             return;
         }

         if (results[0]) {
             new google.maps.Map(target, {
                 center: results[0].geometry.location,
                 zoom: 15
             });
         }else{
             alert('No resulets found');
             return;
         }
     });
 });

/**
 * userの位置を取得して初期値をmapに反映する
 * navigator.geolocationが使える場合
 */
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

/**
 * 情報を取得して表示する。
 */
navigator.geolocation.getCurrentPosition(
  function(position){
    map = new google.maps.Map(target, {
        center: {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        },
        zoom: 15
    });
  },
  // userがブロックしたときの処理
  function(){
      alert('位置情報が取得できませんでした。');
  }
);
 var geocoder = new google.maps.Geocoder();
 var map;
 var service;
 var tokyo = {lat: 35.681167, lng: 139.767052};


 map = new google.maps.Map(target, {
     center: {
         lat: 35.681167,
         lng: 139.767052
     },
     zoom: 15
 });

/**
* 検索ボタンを押下したら、中心地から500m以内の検索キーワードに合致する施設をmapに表示する
*/
 document.getElementById('serach').addEventListener('click', function(){
     service = new google.maps.places.PlacesService(map)
     service.nearbySearch({
         location: {lat, lng}, // 
         radius: '500', // 500m以内
         name: document.getElementById('keyword').value
     }, function(results, status){
         var i;
         if(status === google.maps.places.PlacesServiceStatus.OK){
             for(i = 0; i < results.length; i++){
                 new google.maps.Marker({
                     map: map,
                     position: results[i].geometry.location,
                     title: results[i].name

                 });
             }
         }else{
             alert('Falier ' + status);
             return;
         }
     });
 });

/*
* mapを押下したら押された位置にmarkerを表示する
*/
 map.addListener('click', function(e){
     geocoder.geocode({
         location: e.latLng
     }, function(results, status) {
         if(status !== 'OK'){
             alert('Falier ' + status);
             return;
         }

         if(results[0]){
             new google.maps.Marker({
                 position: e.latLng,
                 map: map,
                 title: results[0].formatted_address,
                 animation: google.maps.Animation.DROP

             });
         } else{
             alert('No results found');
             return;
         }
     });
 });

/**
* 住所から緯度経度を取得してmapを作成する
*/
 serach.addEventListener('click', function(){
     geocoder.geocode({
         address: document.getElementById('address').value
     }, function(results, status) {
         if(status !== 'OK'){
             alert('Failed:' + status);
             return;
         }

         if (results[0]) {
             new google.maps.Map(target, {
                 center: results[0].geometry.location,
                 zoom: 15
             });
         }else{
             alert('No resulets found');
             return;
         }
     });
 });

 var map;
 var tokyo = {lat: 35.681167, lng: 139.767052};
 var marker;
 var infoWindow;

 Geocoding: Adress -> latLng
 Reverse Geocoding: LatLng -> Address

 map = new google.maps.Map(target, {
     center: tokyo,
     zoom: 15 // 18まで
     // disableDefaultUI: true, // 画面のoptionを削除
     // zoomControl: true, // zoom uiだけ表示
     // // mapTypeId: 'satellite' //mapの種類
     // mapTypeId: 'hybrid', // 衛星写真に施設を配合する
     // clickableIcons: false // 
 });


/*
*クリックしたら情報とmarkerを表示する。
*/
 map.addListener('click', function(e){
     var marker = new google.maps.Marker({
         position: e.latLng,
         map: this,
         animation: google.maps.Animation.DROP
     });

     var infoWindow = new google.maps.InfoWindow({
         content: e.latLng.toString()
     });

     marker.addListener('click', function(e){
         infoWindow.open(map, marker);
     });
 });

 map.addListener('click', function(e){
     console.log(e.latLng.lat());
     console.log(e.latLng.lng());
     console.log(e.latLng.toString());
     // this.setCenter(e.latLng);
     this.panTo(e.latLng);
 });

 marker = new google.maps.Marker({
     position: tokyo,
     map, map,
     title: 'tokyo!',
     // icon: "<%#= j(asset_path 'icon.png') %>",
     icon: {
         url: "<%#= j(asset_path 'icon.png') %>",
         scaledSize: new google.maps.Size(24, 24)
     },
     // animation: google.maps.Animation.BOUNCE
     animation: google.maps.Animation.DROP
 });

 map.addListener('click', function(e){
     var marker = new google.maps.Marker({
         position: e.latLng,
         map: map,
         title: e.latLng.toString(),
         animation: google.maps.Animation.DROP
     });
     marker.addListener('click', function(){
         this.setMap(null);
     })
 });
 infoWindow = new google.maps.InfoWindow({
     position: tokyo,
     content: document.querySelector('#info'),
     maxWidth: 100
 });

 infoWindow.open(map);