Rev. 2.73

불러오고 있습니다...
지역 찾기:

구글맵 API 키를 발급 받았습니다. 홈페이지 주소만 입력하면 즉시 발급되는 초간단 키발급 과정에 감탄했습니다. Google Maps API Tutorial를 보고 이것 저것 따라해 보았는데요. 맵 컨트롤과 마커 사용법만 숙지하면 Ajax와 연동해서 비교적 간단하게 매시업 서비스를 만들어 낼수 있겠더군요. 위 예제에 사용된 코드를 아래와 같습니다. 그나저나, 한국에서는 언제즘이나 구글맵 서비스를 받을 수 있게 될까요? 저도 이런 것 만들어보고 싶단 말예요!

// Create GooleMap Class
var GoogleMap = Class.create({
  initialize: function() {
    this.map = new GMap2($("g-map"), {
      mapTypes: [G_HYBRID_MAP,G_SATELLITE_MAP,G_NORMAL_MAP]
    });

    this.geo = new GClientGeocoder(null,"ABQIAAAAHHfZCCuiBtuiksybjj2aSBSWt8ngJ8kMyvwGc_L0tOE6EmI5vRSPN4eKZzqnf7eIfXNbDzT_3uoXeQ"); 
    this.reasons = [];
    this.reasons[G_GEO_MISSING_ADDRESS]    = "알수 없는 주소: 주소가 없거나 빠져있습니다.";
    this.reasons[G_GEO_UNKNOWN_ADDRESS]    = "알수 없는 주소:  지리적 위치에 해당하는 지역에 지정된 주소를 찾을 수없습니다.";
    this.reasons[G_GEO_UNAVAILABLE_ADDRESS]= "확인 할 수 없는 주소: 위치 정보를 제공 주소는 법적 또는 계약상상의 이유로 결과가 반환되지 않았습니니다.";
    this.reasons[G_GEO_BAD_KEY]            = "잘못된 키: 키가 올바르지 않거나 주어진이있는 도메인이 일치하지 않습니다.";
    this.reasons[G_GEO_TOO_MANY_QUERIES]   = "쿼리가 너무 많음: 이 사이트에 대한  하루 정보 할당량을 초과했습니다.";
    this.reasons[G_GEO_SERVER_ERROR]       = "서버 에러: 정보 지정 요청을 성공적으로 처리하지 못했습니다.";

    var hierarchy = new GHierarchicalMapTypeControl(true,false);
    this.map.addMapType(G_PHYSICAL_MAP);
    hierarchy.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, null, true);
    this.map.addControl(hierarchy);

    this.map.addControl(new GSmallZoomControl());
    GOverviewMapControl = new GOverviewMapControl(new GSize(200, 200));
    this.map.addControl(GOverviewMapControl);
    GOverviewMapControl.hide();

    this.map.setCenter(new GLatLng(37.525358268020355, 126.9983321428299), 12);
    this.map.enableContinuousZoom();
    this.map.enableScrollWheelZoom();

    this.createMarker(
      new GLatLng(37.51524053983815, 127.04319477081299),
      '목적지입니다.', {
        icon: G_END_ICON
      }
    );
    this.createMarker(
      new GLatLng(37.52492856902793, 126.99221670627594), [
        {tab: "버스 정거장", content: "버스 정류장입니다."},
        {tab: "버스", content: "730번"}
      ]
    );
    this.createMarker(
      new GLatLng(37.525358268020355, 126.9983321428299),
      '약속장소입니다.', {
        draggable: true,
        icon: this.createGIcon("https://firejune.com/attach/0522/080522161309559083/519114.png")
      }
    );

    this.polylines = [];    
    this.createMarker(
      new GLatLng(37.50972584293751, 127.01946258544922),
      '', {
        draggable: true, icon: G_START_ICON
      }
    );
  },
  showAddress: function() {
    var search = $("g-search").value;
    this.geo.getLocations(search, function(result) {
      if (result.Status.code == G_GEO_SUCCESS) {
        $("g-message").innerHTML = result.Placemark.length + "개의 지역을 찾았습니다.";
        for (var i = 0; i < result.Placemark.length; i++) {
          var p = result.Placemark[i].Point.coordinates;
          var marker = this.createMarker(
            new GLatLng(p[1], p[0]),
            (i + 1) + ": " + result.Placemark[i].address, {
              draggable: true,
              icon: this.createGIcon("https://firejune.com/attach/0522/080522161309559083/589997.png")
            }
          );
          $("g-message").innerHTML += "<br />" + (i + 1) + ": " + result.Placemark[i].address + marker.getPoint();
        }
        var p = result.Placemark[0].Point.coordinates;
        this.map.setCenter(new GLatLng(p[1], p[0]), 11);
      } else {
        var reason="Code " + result.Status.code;
        if (this.reasons[result.Status.code]) reason = this.reasons[result.Status.code];
        $("g-message").innerHTML = ('찾을 수 없습니다! "' + search + '" ' + reason);
      }
    }.bind(this));
  },
  createGIcon: function(image) {
    var gIcon = new GIcon();
    gIcon.image = image;
    gIcon.shadow = "https://firejune.com/attach/0522/080522161309559083/368854.png";
    gIcon.iconSize = new GSize(20, 34);
    gIcon.shadowSize = new GSize(37, 34);
    gIcon.iconAnchor = new GPoint(9, 34);
    gIcon.iconAnchor = new GPoint(9, 34);
    gIcon.infoWindowAnchor = new GPoint(9, 2);
    gIcon.infoShadowAnchor = new GPoint(18, 25);
    return gIcon;
  },
  createMarker: function(point, html, options) {
    options = options || {};
    var marker = new GMarker(point, options), showMarker, items = [];
    if (typeof html == 'object') {
      html.each(function(item) {
        items.push(new GInfoWindowTab(item.tab, item.content));
      });
      showMarker = function() {
        marker.openInfoWindowTabsHtml(items);
      }
    } else if (!html) {
      showMarker = function() {
        this.map.addOverlay(
          new GPolyline(
            [this.polylines[this.polylines.length - 1],
            marker.getPoint()], '#ff0000', 5, 1
          )
        );
        this.polylines.push(marker.getPoint());
      }.bind(this)
    } else {
      showMarker = function() {
        marker.openInfoWindowHtml(html);
      }
    }
    if (options.draggable) {
      GEvent.addListener(marker, "dragstart", this.map.closeInfoWindow);
      GEvent.addListener(marker, "dragend", showMarker);
    }
    if (html) GEvent.addListener(marker, "click", showMarker);

    this.map.addOverlay(marker);
    return marker;
  }
});

if (GBrowserIsCompatible()) GoogleMap = new GoogleMap();

Comments

Got something to add? You can just leave a comment.

  • 리브리스 리브리스

    파이어준님이 '이런것' 이라고 언급하신 페이지 정말 흥미롭네요. 원리가 궁금해요 ^^

    reply edit

  • 구글맵 서비스에 추가된 길찾기를 이용한 것으로 보입니다. 그저 부럽기만 하네요. GPS 리시버의 값을 자바스크립트 변수로 치환하기만 하면 웹기반 네비게이션이 탄생할 지경입니다. 구글이 여럿 말아먹을 기세네요.

    reply edit

  • huni huni

    구글맵api 우리나라 지도문제

    안녕하세요?
    저는 플렉스기반으로 구글맵api 를 사용해서 지도매쉬업 을
    만들던중 구글맵 지도모드 (일반모드인가요? NORMAL_MAP_TYPE) 상에서 우리나라지역만 아무것도 나오지 않는 문제가 생겼습니다. 다른분들이 만든 구글맵 메쉬업을 봐도 우리나라 지명 검색해보면 일반모드 버튼을 누르면 역시 지형에 아무것도 안나오더군요.
    그래서 map.google.co.kr 검색해보니 우리나라 지역정보도 잘보이더군요 T_T;
    그래서 어떻게 하면 구글맵 일반모드에서 지역명, 도로선 등의 지도정보도 보여줄수 있는건가요? 또 미국이나 기타 다른국가는 지도모드에서도 도로, 지형등이 잘나오는것 같습니다. 유독 우리나라만 안나오는걸로 봐서는 뭔가 다른문제인듯 싶습니다. 위성사진모드는 제대로 나옵니다.

    답변 부탁드립니다.
    감사합니다.

    reply edit

  • huni님의 질문에 대한 답변이 저도 궁금합니다. 구글에 물어보고싶은데 방법도 몰라서
    여기에 글남겨 봅니다.

    reply edit

  • 아직 API쪽 지도는 업데이트가 이루어지지 않은 것으로 보입니다.

    reply edit

Your Reaction Time!

captcha

avatar