iOS에서 Google Maps Javascript V3 API 실행하기

곧 출시될 아이폰5에 대한 관심이 뜨겁습니다. 하지만 애플이 새롭게 선보이게 될 iOS 6 부터 구글지도가 아닌 애플 자체 지도를 탑재할 것 이라고 발표한 이후 비교적 부족한 애플지도의 컨텐츠로 인해 “지도 대란”이 일어나지 않을까 하는 우려도 심심치 않게 보도되고 있습니다.

그렇다면 애플지도에 비해 글로벌 컨텐츠가 풍부하고 더욱 안정적인 서비스를 제공하는 구글 지도를 아이폰 어플리케이션에서 계속 사용하려면 어떻게 해야 하나요? 앱 개발자 여러분들을 위해  iOS Google Maps 자바스크립트 v3 API를 실행하고 iOS native와 Google Maps JS API를 연결하는 방법을 소개해 드리려고 합니다.

아이폰에서 Google Maps 자바스크립트 API를 시작하는 방법은 아래 구글 공식 튜토리얼에 자세히 나와있습니다. https://developers.google.com/maps/articles/tutorial-iphone

오늘 소개할 내용은 현재 iPhone의 native map kit framework처럼 단순한 지도 보여주기보다 더 나아가 웹과 네이티브코드 모두와 정보를 주고받아 다양한 처리를 할 수 있는 방법입니다.

 

1. 지도상에 풍선 팝업과 Marker표시하기

다음의 예제 코드를 이용하여 지도상의 원하는 위치에 POI (Point of interest)를 표시할 수 있습니다. POI marker를 클릭하시면 풍선 팝업이 뜹니다.
maps_api_demo1

var myLocation = new google.maps.LatLng(37.521621, 127.924286);

var marker = new google.maps.Marker({ map: map, position: myLocations});

google.maps.event.addListener(marker, ‘click’, onMarkerClick);

//and onMarkerClick function

var infoWindow = new google.maps.InfoWindow;

var onMarkerClick = function(number) {

   var marker = this;

   var latLng = marker.getPosition();

   infoWindow.setContent(‘<h3>Marker position is:</h3>’ + latLng.lat() + ‘, ‘ + latLng.lng());

   infoWindow.open(map, marker);};

JSON 데이터를 이용하여 서버에서 여러개의 POI를 한꺼번에 등록하려면 다음 URL을 참조하세요: http://www.json.org/js.html

 

2. Native iOS에서 Javascript function을 호출하여 Native app에서 웹으로 사용자 액션 보내기

maps_api_demo2
Javascript에 다음과 같은 Function을 추가합니다:
functionshowAlert(hello) { alert(‘Hello ‘ + hello);}

이 Method를 Native code에서 클릭된 버튼에 다음과 같이 적용할 수 있습니다:
             – (IBAction)showAlert:(id)sender { [webviewstringByEvaluatingJavaScriptFromString:@”showAlert(‘SPH Inc.’);”]; }

 

3. Native상에서 버튼 클릭하여 현재 사용자의 디바이스 위치로 지도 중심 이동시키기

maps_api_demo3
Native method:
– (IBAction)shoMap:(id)sender { [webviewstringByEvaluatingJavaScriptFromString:
@”goToMyLocation(37.521673,126.92411)}

위 Function의 parameter인 goToMyLocation 은 사용자 현재 위치의 경/위도 좌표값입니다.

자바스크립트 Function은 다음과 같이 쓸 수 있겠습니다:
             function goToMyLocation(lat, lng) { myLocation = new google.maps.LatLng(lat, lng); map.setCenter(myLocation); }
              // Data를 다시 로딩하시려면 Marker의 위치를 다시 설정해야 합니다. 

 

4. 네번째로 가장 중요한 웹상에서의 이벤트를 네이티브에서 처리하는 기능입니다.

네이티브 코드에서 이벤트를 처리하는 방법은 여러가지가 있지만 제가 사용하는 방법은 다음과 같습니다:

자바스크립트 코드 :

              function sendMessageToNative() { var iframe = document.createElement(“IFRAME”);
                  //web에서 처리해야 하는 url 혹은 native로 보내고 싶은 기타 정보
                   iframe.setAttribute(“src”, “sph:www.sphinfo.com”);
                   document.documentElement.appendChild(iframe);
                   iframe.parentNode.removeChild(iframe);
                   iframe = null;}

웹상에서 on button clicked 이벤트에 이 method를 불러오면 됩니다:
       <div>
           <ahref=“javascript:void(0);”onclick=sendMessageToNative ()”>
              <input type=“button”value=“Say Hello To native code” />
           </a>
      </div>

 

Native side에서 이 정보를 처리하기 위해서는 다음과 같은 UIWebView delegate method 가 필요합니다.

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
     NSString *requestString = [[request URL] absoluteString];requestString = [requestString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

   
     NSLog(@”requestString :  %@”, requestString);
     if([requestString hasPrefix:@”sph:”]) {
         NSArray *arr = [requestString componentsSeparatedByString:@”:”];
         NSString *str = [NSStringstringWithFormat:@”Alert from Native : %@”, [arr objectAtIndex:1]];
         UIAlertView* alertView = [[UIAlertViewalloc]initWithTitle:@”Alert”message:strdelegate:nilcancelButtonTitle:@”OK”otherButtonTitles:nil];

      [alertView show];
   }
   returnYES;
   
}

구글 지도, 더 선명해지다

구글 지도가 더욱 선명해졌습니다.

새롭게 업데이트된 고해상도 항공사진과 위성사진으로 더욱 선명하게 Google Maps와 Earth를 즐겨보세요! 이번 업데이트에는 전 세계 60여개 지역의 고해상도 위성사진과 20여곳의 항공사진이 포함되어있습니다.

Abraj-Al-Bait

세계에서 가장 높은 시계탑인 사우디아라비아 메카의 Abraj Al Bait

 

더불어, 전 세계 30여 도시의 위성사진이 45도 기울여진 각도로 업데이트 되었습니다. 이제 Google Map을 사용하며 지붕 꼭대기가 아닌 실제 건물의 모습들을 확인할 수 있겠네요!

프랑스 보르도 – View Larger Map

이번 업데이트가 반영된 지역과 도시 리스트는 Google Lat Long (Google Maps서비스 영문블로그)에서 확인하실 수 있습니다.
“구글 지도, 더 선명해졌다 .. 우리나라는? ” – ZD Net Korea 기사보기

구글맵으로 만든 전세계 언론자유지도, 한국의 언론은?

전 세계에 분포해있는 신문사의 위치와 언어정보 등을 알려주는 유용한 사이트, Newspaper Map를 제작한 Great Name이 새롭고 유익한 지도사이트를 만들었습니다.

Freedom of Press 2012 라는 이 지도 사이트는 말 그대로 2012년 현재 전 세계 국가들의 언론자유 지수를 구글맵상에 표시해줍니다.

freedom_press_2012

 

국경없는 기자회, Freedom House와 같은 공신력있는 비영리단체의 언론자유 지수를 기반으로 전 세계 국가들의 언론자유 등급을 자유로움(Free), 부분적으로 자유로움 (Partially Free), 자유롭지 못함 (Not Free) 세 가지 등급으로 나누어 한 눈에 볼 수 있게 보여줍니다.

우리나라는 몽골, 인도, 이집트 등과 비슷한 수준인 Partially Free라고 나와있네요.

출처: Google Maps Mania

오픈소셜 플랫폼 에반젤리스트, NHN 오창훈님

[사람을 만나다 002]

전자소녀, 사람을 만나다 제 2탄! 이번시간에는 네이버 소셜게임팀의 오창훈 팀장님과 만나 나눈 이야기를 전해드리려고 합니다.

오창훈 팀장님의 소개를 간략히 드리자면요, 2000년 웹마스터로 IT업계에 발을 들여놓은지 10년차 되는 개발자이시구요, GS E-shop의 테크니컬 리더, NHN UIT센터에서 플래시기반 어플리케이션 개발 등을 거쳐 지금은 네이버 소셜게임팀의 팀장을 맡고계십니다! 매쉬업, 프론트 신기술 도입, 오픈 소셜 플랫폼까지! 한국 웹 기술의 트렌드를 선도하는 분이시지요. (LoveDev 블로그 방문하기!)

개발자도 아닌 제가 오창훈 팀장님을 만난 이유는 “훌륭한 IT기획자가 되려면 어떻게 해야 하나요?”라는 질문의 답을 얻고자였습니다. 이 질문을 하고자 산넘고 물건너! 공기좋은 분당에 위치한 NHN 그린팩토리를 찾아갔습니다!

L1360238

 

Read more