본문 바로가기

HTML5 tag 기본태그

그누보드 홈페이지 구글 지도 삼입

// 지도키. 해외에서 공개된 키라고합니다. // 그냥써도 무방하지만 자신의 키가 있다면 넣어주세요. (key=키값) // 한글지도의 경우 language=en을 language=ko 로 바꿔주시면 됩니다.

// 37.2915450, 127.0430790 을 지우고 메모해두었던 좌표를 넣습니다. // 예) new google.maps.LatLng(좌표, 좌표)

// 아래의 div를 지도가 표기될곳에 넣어주세요. // 가로세로 크기는 편하신대로 변경 하시면 됩니다.

 

// 지도키. 해외에서 공개된 키라고합니다.
// 그냥써도 무방하지만 자신의 키가 있다면 넣어주세요. (key=키값)
// 한글지도의 경우 language=en을 language=ko 로 바꿔주시면 됩니다.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwlNqAEil52XRPHmSVb4Luk18qQG9GqcM&sensor=false&language=en"></script> 
 
// 37.2915450, 127.0430790 을 지우고 메모해두었던 좌표를 넣습니다.
// 예) new google.maps.LatLng(좌표, 좌표)
<script> 
  function initialize() { 
var myLatlng = new google.maps.LatLng(37.2915450, 127.0430790); // 좌표값
  var mapOptions = { 
        zoom: 14, // 지도 확대레벨 조정
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
  var marker = new google.maps.Marker({ 
position: myLatlng, 
map: map, 
title: "회사명" // 마커에 마우스를 올렸을때 간략하게 표기될 설명글
}); 
  } 
window.onload = initialize;
</script>
 
// 아래의 div를 지도가 표기될곳에 넣어주세요.
// 가로세로 크기는 편하신대로 변경 하시면 됩니다.
<div id="map_canvas" style="width: 100%; height: 400px; margin:0px;"></div>
 
 
 
 
 
 
 

'HTML5 tag 기본태그' 카테고리의 다른 글

HTML Responsive 반응형 홈페이지  (0) 2019.07.18
HTML <head> 헤드 요소  (0) 2019.07.18
html 자바스크립트 JavaScript 태그  (0) 2019.07.18
HTML Tables 태그  (0) 2019.07.11
HTML5 Iframe 태그  (0) 2019.07.11