티스토리 뷰

개발기록2/Spring

구글 지도 한페이지 내에 2개 넣기

이불감고돌돌 2017. 7. 7. 10:18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//지도를 넣기 위해 발급키 불러오기
  <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=본인의API키&callback=initMap" type="text/javascript"> </script>
 
 
<script>
 function initMap() {
     var uluru = {lat: 좌표, lng: 좌표};
     var uluru2 = {lat: 좌표2, lng: 좌표2};
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 18,
       center: uluru
     });
     var marker = new google.maps.Marker({
       position: uluru,
       map: map
     });
      
      
     var map2 = new google.maps.Map(document.getElementById('map2'), {
         zoom: 18,
         center: uluru2
       });
     var marker2 = new google.maps.Marker({
         position: uluru2,
         map: map2
       });
      
     google.maps.event.addDomListener(window, "load", initMap);
   }
    </script>
1
2
3
4
//지도를 넣고 싶은 위치에 삽입하기
 
<div id="map"></div>
<div id="map2"></div>







-사담-
사실 맨 처음에 생각없이
키값을 불러와서
1
2
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=본인의API키&callback=initMap" type="text/javascript"> </script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=본인의API키&callback=initMap2" type="text/javascript"> </script>

이런식으로 2개를 선언했다.
물론 함수도 initMap(), initMap2() 이렇게 2개를 .....
그러면 에러가 난다 !!!

Google Maps API multiple times on this page.



쪼끔만 더 생각했으면 없었을 에러......
저작자표시 비영리 변경금지

'개발기록2 > Spring' 카테고리의 다른 글

페이지 출력하기  (0) 2017.06.20
DB 연동하기  (0) 2017.06.19
1  (1) 2017.06.09
공유하기 링크
댓글
최근에 달린 댓글
링크
Total
Today
Yesterday