Web/Google Maps 검색 결과

6개 발견
  1. 미리보기
    2016.02.29 - Palpit

    [Google Maps] 6. 구글 맵스 타입(Types) - 구글 맵 API 강좌

  2. 미리보기
    2016.02.28 - Palpit

    [Google Maps] 5. 구글 맵스 제어(Controls) - 구글 맵 API 강좌

  3. 미리보기
    2016.02.28 - Palpit

    [Google Maps] 4. 구글 맵스 이벤트(Events) - 구글 맵 API 강좌

  4. 미리보기
    2016.02.28 - Palpit

    [Google Maps] 3. 구글 맵스 오버레이(Overlays) - 구글 맵 API 강좌

  5. 미리보기
    2016.02.28 - Palpit

    [Google Maps] 2. 구글 맵스 기본 - 구글 맵 API 강좌

  6. 미리보기
    2016.02.28 - Palpit

    [Google Maps] 1. 개요(Tutorial) - 구글 맵 API 강좌

조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)




Google Maps Types


 Google Maps - Basic Map Types

  구글 맵스 API안에는 아래와 같은 종류의 맵 타입을 지원합니다:

  - ROADMAP(normal, default 2D map)

  - SATELLITE(photographic map)

  - HYBRID(photographic map + road and city names)

  - TERRAIN(map with mountains, rivers, etc.)


  맵 타입은 맵 속성 객체 안에 명시할 수 있습니다.


1
2
3
4
5
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.HYBRID
};
cs



  또한, setMapTypeId() 메소드를 호출하여 설정 가능합니다.


1
2
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
 
cs




 Google Maps - 45° Perspective View

  SATELLITE 와 HYBRID 맵 타입은 특정 위치의 45도 원경 뷰를 지원합니다.


  * perspective.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var myCenter=new google.maps.LatLng(48.8581872.294551);
 
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:18,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };
 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
 
cs



 





 Google Maps - Disable 45° Perspective View - setTilt(0)

  setTilt(0)을 호출하여 45도 기능을 해제할 수 있습니다.


1
2
 
map.setTilt(0);
cs





end



* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)






Google Maps Controls


 Google Maps - The Default Controls

  기본 구글 맵을 보면, 기본 제어 셋을 볼 수 있습니다:

  - Zoom: 맵의 줌 레벨을 제어하는 버튼인 "+/-" 슬라이더

  - Pan: panning을 하기 위한 pan 컨트롤

  - MapType: 맵 타입을 변경하기 위한 버튼

  - Street View: 스트릿 뷰를 보기위한 버튼



 Google Maps - More Controls

  기본 제어 셋 이외에도 아래와 같은 제어 셋이 있습니다:

  - Scale: 맵의 크기 단위를 보임

  - Rotate: 맵을 회전시키기 위한 작은 원형 아이콘

  - Overview Maps: 현재 맵에서의 전반적인 썸네일(Thumbnail)




 Google Maps - DIsabling The Default Controls

  기본 제어 셋을 끄고 싶다면 아래와 같이 해주시면 됩니다.


  mapProp에 추가시켜주시면 됩니다.


1
2
 
disableDefaultUI:true
cs





 Google Maps - Turn On All Controls

  몇몇 제어 셋은 맵에 기본적으로 보이나, 다른 제어 셋은 보이지 않을 수도 있습니다.


  맵 옵션 객체에 추가 혹은 삭제를 통해서 맵에 제어 셋을 보일 수 있습니다.


1
2
3
4
5
6
7
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
cs





 Google Maps - Modifying Controls

  몇몇 맵 제어는 설정 가능합니다.


  제어는 제어 옵션 필드(control options fields)에 의해 변경 가능합니다.


  예를 들어, 줌 제어 변경을 위한 옵션은 zoomControlOptions 필드에서 명시됩니다. zoomControlOptions 필드는 아래와 같은 속성을 포함합니다:

  - google.maps.ZoomControlStyle.SMALL: 작은 줌 컨트롤 표시

  - google.maps.ZoomControlStyle.LARGE: 표준 줌 슬라이더 컨트롤 표시

  - google.maps.ZoomControlStyle.DEFAULT: 기기와 맵 사이즈를 기반으로한 최적으 줌 컨트롤 표시



 * zoomControl.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(37.250943127.028344),
    zoom:7,
    zoomControl:true,
    zoomControlOptions: {
      style:google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
 
cs











 Google Maps - Custom Controls

  언제든지 자신이 지정한 위치로 이동하기위한 커스텀 컨트롤을 생성할 수 있습니다.



 * customControl.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var map;
var suwon = new google.maps.LatLng(37.250943127.028344);
 
// Add a Home control that returns the user to Suwon
function HomeControl(controlDiv, map) {
  controlDiv.style.padding = '5px';
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'yellow';
  controlUI.style.border='1px solid';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Set map to Suwon';
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement('div');
  controlText.style.fontFamily='Arial,sans-serif';
  controlText.style.fontSize='12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b>Home<b>'
  controlUI.appendChild(controlText);
 
  // Setup click-event listener: simply set the map to Suwon
  google.maps.event.addDomListener(controlUI, 'click'function() {
    map.setCenter(suwon, 37.250943127.028344)
  });
}
 
function initialize() {
  var mapDiv = document.getElementById('googleMap');
  var myOptions = {
    zoom: 12,
    center: suwon,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions); 
  // Create a DIV to hold the control and call HomeControl()
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);
//  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
 
cs







end



* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)






Google Maps Events

 

 Click The Marker to Zoom

  이제 사용자가 마커를 클릭했을 때 줌을 하도록 해보곘습니다. 


 * markerZoom.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var myCenter=new google.maps.LatLng(37.250943127.028344);
 
function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });
 
marker.setMap(map);
 
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
 
</body>
</html>
 
cs









  addListener() 이벤트 핸들러를 사용해서 이벤트 알림을 위해 등록했습니다.





 Pan Back to Marker

  3초마다 마커로 위치시키는 이벤트를 등록해보도록 하겠습니다.  


  center_changed 이벤트를 등록하고 아래와 같은 방식으로 밀리세컨드 단위로 작성합니다.



1
2
3
4
5
6
 
google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});
cs






 Open an InfoWindow When Clicking on The Marker

  마커를 클릭할 때, 특정 텍스트를 보이게 하는 infowindow를 작성합니다.



1
2
3
4
5
6
7
var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });
 
google.maps.event.addListener(marker, 'click'function() {
  infowindow.open(map,marker);
  });
cs





 Set Markers and Open InfoWindow for Each Marker

  placeMarker() 함수는 사용자가 클릭 했을 때 클릭한 위치에 마커를 위치시키고, 위도와 경도를 infowindow로 보여줍니다.



 * markerInfo.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var map;
var myCenter=new google.maps.LatLng(37.250943127.028344);
 
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 
  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
  google.maps.event.addListener(map, 'click'function(event) {
    placeMarker(event.latLng);
  });
}
 
function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
 
</body>
</html>
 
cs










end



* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)




Google Maps Overlays

 구글 맵에 마커를 추가합니다.



 Google Maps - Overlays

  오버레이(Overlays)는 맵에 위도 경도 좌표를 표시하기위한 객체입니다.


  구글 맵은 여러 타입의 오버레이를 가지고 있습니다:

  - 마커(Marker): 맵에 단일 위치를 표시. 마커는 또한 특정 아이콘 이미지를 통해 표시할 수 있습니다.

  - 선(Polyline): 맵에 선분을 연결한 선

  - 다각형(Polygon): 닫힌 도형

  - 원과 사각형(Circle and Rectangle)

  - 정보 창(Info Windows): 맵에 팝업 창으로 정보를 표시

  - 커스텀 오버레이(custom overlays)




 Google Maps - Add a Marker

  마커 생성자(Marker Constructor)는 마커를 생성합니다.(위치 속성을 마커를 표시하기 위해 꼭 작성해야합니다)


  setMap() 메소드를 사용해서 마커를 맵에 추가합니다.



 * marker.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var myCenter=new google.maps.LatLng(37.250943127.028344);
 
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
var marker=new google.maps.Marker({
  position:myCenter,
  });
 
marker.setMap(map);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
 
cs



 






 Google Maps - Animate the Marker

  아래 예제는 애니메이션 속성을 통해서 마커를 어떻게 움직이는 지 보여줍니다.


1
2
3
4
5
6
7
 
var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });
 
marker.setMap(map);
cs




 Google Maps - Icon Instead of Marker

  아래 예제는 기본 마커 대신에 특정 이미지를 사용하여 마커를 생성하는 예제입니다.



1
2
3
4
5
6
var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });
 
marker.setMap(map);
cs





 Google Maps - Polyline

  선(Polyline)은 일련의 순서로 정렬된 좌표를 이은 선입니다.


  선은 아래와 같은 속성을 지원합니다:

  - Path: 라인을 위한 여러 개의 위도/경도를 명시

  - strokeColor: 선을 위한 16진법 색으로 명시

  - strokeOpacity: 선의 불투명도를 명시

  - strokeWeight: 선의 굵기를 명시

  - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)


1
2
3
4
5
6
7
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});
cs




 Google Maps - Polygon

  다각형(Polygon)은 선과 비슷합니다. 그러나, 다각형은 닫힌 구간으로 이루어진 도형으로 구성되어집니다.


  다각형은 아래와 같은 속성을 지원합니다:

  - Path: 선의 위도/경도 좌표를 명시(첫과 끝의 좌표는 동일)

  - strokeColor: 선을 위한 16진법 색으로 명시

  - strokeOpacity: 선의 불투명도를 명시

  - strokeWeight: 선의 굵기를 명시

  - fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
  - fillOpacity: 닫힌 영역안의 불투명도를 위한 명시

  - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)



 * polygon.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
var x=new google.maps.LatLng(37.250943127.028344);
var seoul=new google.maps.LatLng(37.541420126.991610);
var suwon=new google.maps.LatLng(37.250943127.028344);
var incheon=new google.maps.LatLng(37.438567126.664466);
 
function initialize()
{
var mapProp = {
  center:x,
  zoom:9,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
var myTrip=[seoul,suwon,incheon,seoul];
var flightPath=new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });
 
flightPath.setMap(map);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
 
cs






 Google Maps - Circle
  원(Circle)은 아래 속성을 지원합니다:
  - center: 원의 중심부를 google.maps.LatLng로 명시
  - radius: 원의 반경을 명시

  - strokeColor: 원의 테두리 선을 위한 16진법 색으로 명시

  - strokeOpacity: 선의 불투명도를 명시

  - strokeWeight: 선의 굵기를 명시

  - fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
  - fillOpacity: 닫힌 영역안의 불투명도를 위한 명시

  - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)



1
2
3
4
5
6
7
8
9
var myCity = new google.maps.Circle({
  center:suwon,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});
cs




 Google Maps - InfoWindow
  텍스트와 마커를 통한 InforWindow를 보이는 예제입니다:

1
2
3
4
5
var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });
 
infowindow.open(map,marker);
cs





end



* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)





Google Maps Basic

 

 Create a Basic Google Map

  아래 예제 코드는 한국을 기준으로 구글 맵을 생성하였습니다.


  직접 코드를 입력해서 실행해보세요.



 * googlemaps.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(37.250943127.028344),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
 
</html>
cs












  그럼 하나하나 설명하도록 하겠습니다.




 1. Load the Google API

  구글 맵스 API는 자바스크립트 라이브러리(JavaScript library)입니다. <script> 태그를 통해서 웹 페이지에 추가 가능합니다.


1
<script src="http://maps.googleapis.com/maps/api/js"></script>
cs





 2. Set Map Properties

  맵을 초기화해주기 위한 함수(function)를 만듭니다.


1
function initialize() {}
cs


  초기화 함수안에, 맵의 속성(properties)을 정의할 객체(mapProp)을 생성합니다.


1
2
3
4
5
  var mapProp = {
    center:new google.maps.LatLng(37.250943127.028344),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
cs



  center 속성은 맵의 중심을 어디로 할지 정의합니다. LatLng 객체를 생성하여 맵에 특정 포인트를 정합니다. 


  zoom 속성은 맵에서의 줌 레벨을 정의합니다. 


  mapTypeId 속성은 화면에 표시될 맵 타입을 정의합니다. 아래 나오는 맵 타입을 지원합니다:

  - Roadmap(normal, default 2D map)

  - Satellite(photographic map)

  - Hybrid(photographic map + roads and city names)

  - Terrain(map with mountains, rivers, etc.)





 3. Create a Map Container

  맵을 담기 위한 <div>태그를 생성합니다. CSS를 사용하여 사이즈를 설정합니다.


1
<div id="googleMap" style="width:500px;height:380px;"></div>
cs




 4. Create a Map Object

  


1
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
cs



  위 코드는 id가 'googleMap'인 <div> 태그 안에 새로운 맵을 만드는 코드입니다. 파라미터인 mapProp을 이용해서 말이죠.



 5. Add an Event Listener to Load the Map

  DOM 리스너를 추가하여 페이지가 로드될 때, initialize() 함수가 실행되게 합니다.


1
2
google.maps.event.addDomListener(window'load', initialize);
 
cs






 Multiple Maps

  아래 예제는 하나의 웹 페이지에 4개의 맵을 생성하는 예제입니다.



 * fourmaps.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
 
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(37.250943127.028344),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapProp2 = {
    center: new google.maps.LatLng(37.250943127.028344),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var mapProp3 = {
    center: new google.maps.LatLng(37.250943127.028344),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var mapProp4 = {
    center: new google.maps.LatLng(37.250943127.028344),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
  var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
  var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
 
google.maps.event.addDomListener(window'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
 
</body>
</html>
 
cs






 Google API Key

  구글은 어떤 구글 API 든 웹 사이트에 불러올 수 있게 해줍니다.


  만약 과다 트래픽을 위한 계획이 있다면, 구글로부터 무료 API 키를 얻길 바랍니다.


  https://console.developers.google.com 이 링크에서 받길 바랍니다.


  발급받은 키를 아래와 같이 사용하시길 바랍니다.



1
2
3
 
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
 
cs






end



* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다
조회수 확인

W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



구글 맵 API 기본(Basic)

구글 맵 API 오버레이(Overlays)

구글 맵 API 이벤트(Events)

구글 맵 API 제어(Controls)

구글 맵 API 타입(Types)




순차적으로 봐주시면 아마 익히시기 편리하실 겁니다.


참조를 원하시면 각 장을 선택해주시면 됩니다.






Google Maps API Tutorial

 

 What is Google Maps?

  구글 맵은 웹 사이트에 맵을 표시하는데 사용됩니다.



 Google Maps API

  이번 튜토리얼은 Google Maps API(Application Programming Interface)에 관한 것 입니다.


  Google Maps API는 커스터마이즈 맵과 맵 상의 정보를 보이게 해줍니다.







* 이 포스팅은 'w3school'를 통해 작성하였습니다.

다른 카테고리의 글 목록

Web/Google Maps 카테고리의 포스트를 톺아봅니다