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

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에서 웹으로 사용자 액션 보내기

 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은 다음과 같이 쓸 수 있겠습니다:
              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;
    
 }

 

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다