3. Google API - jmini1234/tripmate GitHub Wiki

1. Google Map API

1.1 Google Map 출력

var map, infowindow, pos, geocoder;

function initMap() {

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

    center: {lat: -34.397, lng: 150.644},

    zoom: 6

  });

  infowindow = new google.maps.InfoWindow;

  geocoder = new google.maps.Geocoder;

map 변수는 html tag 중 id 값이 map인 화면을 받아서 선언한다.

google map api를 통해 infowindow와 geocoder 변수를 선언한다.

infowindow : 현재 정보와 관련된 window 화면이다.
geocoder : 위치를 위도와 경도로 나타낸다.

1.2 현재 위치 좌표 반환

  // Try HTML5 geolocation.

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {

      pos = {

        lat: position.coords.latitude,

        lng: position.coords.longitude

      };


      infowindow.setPosition(pos);

      infowindow.setContent('Location found.');

      infowindow.open(map);

      map.setCenter(pos);

      geocodeLatLng(geocoder, map, infowindow);

    }, function() {

      handleLocationError(true, infowindow, map.getCenter());

    });

  } else {

    // Browser doesn't support Geolocation

    handleLocationError(false, infowindow, map.getCenter());

  }

}

initMap() : 내 위치를 반환하는 Map을 불러온다.

navigator.geolocation.getCurrentPosition 메소드로 position 변수를 통해 pos 에 현재 위도와 경도 값을 저장한다.

infowindow.setPosition(pos) 로 현재 위치와 관련된 지도를 화면에 보여주고 map을 open 해서 화면에 띄운다.

이 곳에서 geocodeLatLng(geocoder, map, infowindow) (1.3 참조) 함수를 불러와서 실제 주소 값까지 반환한다.

1.3 좌표를 주소로 변경 (reverse Geocoding)

var address ;

function geocodeLatLng(geocoder, map, infowindow) {

        geocoder.geocode({'location': pos}, function(results, status) {

          if (status === 'OK') {

            if (results[0]) {

              map.setZoom(11);

              var marker = new google.maps.Marker({

                position: pos,

                map: map

              });

              infowindow.setContent(results[0].formatted_address);

              address=results[0].formatted_address;

              infowindow.open(map, marker);
			var lat = document.getElementById("location");
              lat.innerHTML = address;

            } else {

              window.alert('No results found');

            }

          } else {

            window.alert('Geocoder failed due to: ' + status);

          }

        });

      }

현재 위치로 받아온 위도 경도 값을 주소 값으로 변경하는 geocodeLatLng 함수

Map을 pos(현재 위치)로 Zoom을하고 marker 표시해 그 곳에 setContent로 주소를 화면에 출력한다.

pos에 저장되어 있는 위도 경도 값을 result[0]에 넣고 formatted_address를 사용해서 adress 변수에 실제 주소를 저장한다.

id가 location인 화면을 찾아 lat으로 정의한 다음 그 화면에 현재 주소를 나타내기위해 innerHTML 을 사용해서 address를 표시한다.

2. Google Map - Firebase 연동

2.1 firebase 연동

  <script src="/__/firebase/5.5.8/firebase-app.js"></script>
    <script src="/__/firebase/5.5.8/firebase-auth.js"></script>
    <script src="/__/firebase/5.5.8/firebase-database.js"></script>
    <script src="/__/firebase/5.5.8/firebase-storage.js"></script>
    <script src="/__/firebase/5.5.8/firebase-messaging.js"></script>
    <script src="/__/firebase/init.js"></script>

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

사용하는 프로젝트의 database가 저장된 firebase 을 연결하기 위해 firebase의 source를 script를 통해서 넣어준다.

2.2 Google Map 연동

    <script src="scripts/map.js"></script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=[Google_API_KEY]&callback=initMap">

    </script>

firebase-Google Map 연동을 위해 firebase.js를 참조하는 script와 google api key를 넣은 script를 추가한다.