구글맵(Google Map)에 InfoWindow 만들기

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

InfoWindows 만들기
아래와 같이 new google.maps.InfoWindow함수의
content에 적당한 Text를 써넣기만 하면 됩니다.

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

Source

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

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(37.5753959,126.9712319);
  var mapCanvas = document.getElementById("infoMap");
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  * maker에 관해서는 구글맵(Google Map)에서  Maker사용하기 참조
  marker.setMap(map);
  
  var infowindow = new google.maps.InfoWindow({
    content: "안녕 여러분!<br/><b>대한민국 수도</b>"
  });
  infowindow.open(map,marker);
}
</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를 한번에 보면 InfoWindow가 안 보입니다.
왼쪽 MENU에서 하나씩 보세요

구글맵(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에서 하나씩 보세요

구글맵(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에서 하나씩 보세요

구글맵(Google Map) 사용요령

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

Source

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

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

JQuery Dimension

다음 Style의 Box와 JQuery Dimension함수들
width(), height(),
innerWidth(), innerHeight(),
outerWidth(), outerHeight(),
outerWidth(true), outerHeight(true)
사용법과 차이점

Source

.box {
    background-color: lightgrey;
    width: 350px;
    border: 10px solid green;
    padding: 25px;
    margin: 20px ;
}

$(document).ready(function(){
  var txt = "";
  txt += "Width: "+$(".box").width() ;
  txt += "Height: "+$(".box").height();
  txt += "Inner W: "+$(".box").innerWidth();
  txt += "Inner H: "+$(".box").innerHeight();
  txt += "Outer W: "+$(".box").outerWidth();
  txt += "Outer H: "+$(".box").outerHeight();
  txt += "Outer W: "+$(".box").outerWidth(true);
  txt += "Outer H: "+$(".box").outerHeight(true);
  $(".box").html(txt);
});

Result