구글맵(Google Map)에서 Maker사용하기

자신의 web-page에서 구글맵(Google Map)을 사용하기 위해서는 먼저
https://developers.google.com/maps/documentation/javascript/get-api-key
를 방문하여 자신의 "API key"를 얻어야 합니다.
이 web-page에서 "Get a Key "라는 button을 누르면 됩니다.

서울시청에 Maker 넣기
서울시청 경위도
위도: 37.5753959
경도: 126.9712319

여러 web-page를 한번에 보면 Maker가 안 보입니다.
왼쪽 MENU에서 하나씩 보세요

Source

<div id="googleMaker" style="width:100%;height:400px;"><div>

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(37.5753959,126.9712319);
  // 위에서 위도:37.5753959, 경도: 126.9712319>
  var mapProp= {   center: myCenter,    zoom:5,  };
  // zoom의 숫자 5는 클수록 지도가 커진다.
  var map=new google.maps.Map(document.getElementById("googleMaker"),mapProp);
  // 지도가 들어갈 div의 id="googleMaker",
  // 그리고 위에서 만든 함수 mapProp

  // Maker를 사용하기 위해서는
  // 다음 두줄을  삽입하면 된다.
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);
}
</script>

<script>
src="https://maps.googleapis.com/maps/api/js?key=자신의 key &callback=myMap
</script>
// 자신의 key는 다음 web-page에서 얻는다
// https://developers.google.com/maps/documentation/javascript/get-api-key
// 마지막으로 callback함수로 위에서 만든 myMap를 대입!!!

Result

여러 web-page를 한번에 보면 Maker가 안 보입니다.
왼쪽 MENU에서 하나씩 보세요