google map api 사용법 (한 페이지에 다수의 구글맵 가능)

 

 

 

진짜 겁나 헤맸던 google map api 사용법. 직접 발급받은 key를 사용하는 법이 있고 왜인지 모두가 쓸수있는 key를 사용하는 법이 있는데, 진짜 모두 쓰는 그 방법이 훠어어어엉어어어어어얼씬 낫다 진짜..후...

 

1. 직접 발급받은 key사용법

 

- key를 발급받는 절차부터 복잡하다. 이건 naver에 검색하면 많이 나오므로 패스. 키를 발급받은다음,

 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAKf-Ja4sqOc09g0uRRqpXihfTk537eeE&callback=initMap"></script>

 

스크립트 선언을 먼저 한다. 빨간부분은 내가 발급받은 api 키를 넣으면 된다.

 

<div id="map"></div>

 

map을 넣을 공간을 마련해준다. 이때, #map은 width와 height값을 준 상태여야 한다.

 

 

이 #map에 width와 height값을 준다. 그리고 body가 닫히기 직전,

 

<script>

var map;

 function initMap() {

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

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

  zoom: 8

  });

 

 </script>

 

이렇게 써준다.후... 그런데 이방법을 사용하면 1p에는 하나의 구글맵밖에 업로드 하지 못한다 8ㅅ8..

 

 

 

 

 

2. 모두가 쓰는 key사용 - 1p에 다수의 구글맵 사용

 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 

선언한 후.

 

<div id="map_canvas"></div>

<div id="map_canvas2"></div>

 

똑같이 width, height 준 다음, 그리고 body가 닫히기 직전 ,

 

 

<script>

  function initialize()

  {

      var latlng = new google.maps.LatLng(18.520266,73.856406);

      var latlng2 = new google.maps.LatLng(28.579943,77.330006);

      var myOptions =

      {

          zoom: 15,

          center: latlng,

          mapTypeId: google.maps.MapTypeId.ROADMAP

      };

 

      var myOptions2 =

      {

          zoom: 15,

          center: latlng2,

          mapTypeId: google.maps.MapTypeId.ROADMAP

      };

 

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 

      var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

 

      var myMarker = new google.maps.Marker(

      {

          position: latlng,

          map: map,

          title:"Pune"

     });

 

      var myMarker2 = new google.maps.Marker(

      {

          position: latlng2,

          map: map2,

          title:"Noida"

      });

  }

</script>

 

 

 

이렇게 써주면 된다. Marker에 title은 자기가 원하는 이름을 넣으면 되고. 이걸로는 한페이지에 12까지 넣어봤다. 로딩 거어엉어어어어업나 길어진다...;ㅅ;