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;
   
}

1 reply
  1. Bhaban
    Bhaban says:

    Wow, what a nice post.
    Its really good to start google maps javascript api with iphone.
    As we know that google map wont be available anymore. So we really need this kind of tutorial to start google maps by using iOS webview in native application.

    keep it up.
    Regards

Comments are closed.