구글맵(Google Map)에 PolyLine그려넣기

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

PolyLine그려넣기
서울 경위도 : 37.5753959,126.9712319
홍콩 경위도 : 22.3524919,113.8468287
북경 경위도 : 39.9375282,115.8356767

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

Source

<div id="polyLineMap" style="width:100%;height:500px;"><div>

<script>
function myMap() {
  var Seoul = new google.maps.LatLng(37.5753959,126.9712319);
  var Hongkong = new google.maps.LatLng(22.3524919,113.8468287);
  var Beijing = new google.maps.LatLng(39.9375282,115.8356767);
  var mapCanvas = document.getElementById("PolyLineMap");
  var mapOptions = {center: Seoul, zoom: 4};
  var map = new google.maps.Map(mapCanvas,mapOptions);
  
  var flightPath = new google.maps.Polyline({
    path: [Seoul, hongKong, Beijing],
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2
  });
  flightPath.setMap(map);
  
  //path: [Seoul, hongKong, Beijing]에서 맨 끝에
  //Seoul을 한번 더 써 녛으면 삼각형이 그려짐
  
}
</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를 한번에 보면 PolyLine이 안 보입니다.
왼쪽 MENU에서 하나씩 보세요