구글맵(지도) 넣기

구글맵 넣기

 

HTML

<div id="map_canvas"style="width:760px; height:500px;"></div> 
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>

JS

function initialize() { 
  /* 
  http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=서울특별시 서초구 서초동 
  위의 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있습니다. 
  */ 

  var Y_point  = 37.4850609; // Y 좌표 
  var X_point  = 127.0323093;   // X 좌표 
  var zoomLevel  = 17;   // 첫 로딩시 보일 지도의 확대 레벨 
  var markerTitle  = "SIR";  // 현재 위치 마커에 마우스를 올렸을때 나타나는 이름 
  var markerMaxWidth = 300;  // 마커를 클릭했을때 나타나는 말풍선의 최대 크기 

  // 말풍선 내용 
  var contentString = '<div id="content">' + 
  '<div id="siteNotice">' + 
  '</div>'+ 
  '<h3 id="firstHeading" class="firstHeading">슬라이드</h3>'+ 
  '<div id="bodyContent">'+ 
  '<p>서울특별시 강남구 논현동<br />'
  '</div>'+ 
  '</div>'; 

  var myLatlng = new google.maps.LatLng(Y_point, X_point); 
  var mapOptions = { 
    zoom: zoomLevel, 
    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: markerTitle 
  }); 

  var infowindow = new google.maps.InfoWindow( 
   { 
    content: contentString, 
    maxWidth: markerMaxWidth 
   } 
  ); 
  google.maps.event.addListener(marker, 'click', function() { 
  infowindow.open(map, marker); 
  }); 
 } 
 initialize();

 

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/OJajNWw