'Google Maps API'에 해당되는 글 11건

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                          southWest.lng() + lngSpan * Math.random());
  map.addOverlay(new GMarker(point, icon));

이 예제는 새로운타입의 아이콘을 생성한다. 사용자는 아이콘이미지, 그림자이미지, 아이콘의 포인트까지 일일이 열거해야된다.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Our info window content
var infoTabs = [
  new GInfoWindowTab("Tab #1", "This is tab #1 content"),
  new GInfoWindowTab("Tab #2", "This is tab #2 content")
];

// Place a marker in the center of the map and open the info window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

API 버전2는 멀티말풍선을 지원하는 openInfoWindowTabs()와 GInfoWindowTab 클래스를 포함한다. 이 예제는 마커위에 멀티말풍선을 보여주는 코드이다.

형식
GInfoWindowTab(label, content)
openInfoWindowTabs(tabs, opts?)


예제보기

예제보기

  이 예제는 무작위로 선택된 10개의 마커와 무작위로 선택된 5개의포인트를 연결한 선을 보여준다. GMarker의 아이콘은 다른 아이콘을 설정하지 않을경우 기본적으로 구글맵아이콘이 사용된다.

익스플러에서 맵위에 오버레이된 선을 보려면 HTML문서에 VML namespace와 CSS를 포함해야한다.