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를 클릭하시면 풍선 팝업이 뜹니다.

varmyLocation =newgoogle.maps.LatLng(37.521621,127.924286);

varmarker =newgoogle.maps.Marker({ map: map, position: myLocations});

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

//and onMarkerClick function

varinfoWindow =newgoogle.maps.InfoWindow;

varonMarkerClick =function(number) {

varmarker =this;

varlatLng = marker.getPosition();

infoWindow.setContent('h3Marker 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에서 웹으로 사용자 액션 보내기

Javascript에 다음과 같은 Function을 추가합니다:

functionshowAlert(hello) {

alert('Hello '+ hello);

}

이 Method를 Native code에서 클릭된 버튼에 다음과 같이 적용할 수 있습니다:

- (IBAction)showAlert:(id)sender{[webviewstringByEvaluatingJavaScriptFromString:@"showAlert('SPH Inc.');"];}

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

Native method:

- (IBAction)shoMap:(id)sender {

[webviewstringByEvaluatingJavaScriptFromString:@"goToMyLocation(37.521673,126.92411);

}

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

자바스크립트 Function은 다음과 같이 쓸 수 있겠습니다:

functiongoToMyLocation(lat, lng) {
myLocation =newgoogle.maps.LatLng(lat, lng);
map.setCenter(myLocation);
// Data를 다시 로딩하시려면 Marker의 위치를 다시 설정해야 합니다.

}

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

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

자바스크립트 코드 :

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

웹상에서 on buttonclicked 이벤트에 이 method를 불러오면 됩니다:

p
ahref="javascript:void(0);"onclick="sendMessageToNative()"
inputtype="button"value="Say Hello To native code"/
/a
/p

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

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

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

[alertViewshow];
}
returnYES;

}

iOS 6 vs. iOS 5 성능 차이는? 맥월드 랩 테스트 결과
iOS 6에는 200가지 이상의 새로운 기능이 추가됐다. 이런 업그레이드가 성능에는 어떤 영향을 줄까? 맥월드 랩(Macworld Lab)에서는 iOS 기기를 대상으로 iOS 6로 업그레이드하기 전과 후를 비교해서 속도가 빨라졌는지...

iOS6 통해 HTML5의 미래를 예측하다!
HTML5 기반 웹 애플리케이션 시장 전망은? 아이폰·아이패드 운영체제 iOS6 기점으로 활용분야 대폭 확장 [보안뉴스 권 준] 최근 페이스북 창업자인 마크 주커버그가 한 인터뷰에서 “본인의 최대 실수는 HTML5에 너무...

IE vs. 크롬 vs. 파이어폭스, 최고의 브라우저는?
아마 PC에서 웹 브라우저만큼 많이 쓰이는 애플리케이션도 없을 것이다. 이메일 체크, 이메일 작성, 동료들과 협업은 물론 고양이 비디오를 보는 것도 웹 브라우저 상에서 이루어진다. 그렇게 비중이 큰 만큼, 사용자에게...