ActiveX

GoogleMap연동

넥사크로플랫폼에서 GoogleMap연동하는 방법에 대해 기술합니다.

GoogleMap을 사용하는 경우에는 라이선스가 필요합니다.

(고객사에서 서비스 하는 형태에 따라 라이선스가 필요할 수 있으므로 이 부분에 대해서는

반드시 라이선스를 확인 후 사용하시기 바랍니다.)


https://developers.google.com/maps/terms

준비작업

Map을 사용하기 위해서는 TypeDefinition에 Map을 정의해 주서야 합니다.

googlemap1

Web browser방식(기존 html5)

googlemap1

주요 소스 내용

//Map 좌표
this.fs_srcLatitude = "37.576683";
this.fs_srcLongitude = "127.025591";

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{   
    this.Map00.load(false, this.fs_srcLatitude, this.fs_srcLongitude);
}
//Map이 모두 Load된 후 Marker 처리       
this.Map00_onload = function(obj:Map, e:nexacro.MapEventInfo)
{
    var obj_mapmarker = new nexacro.MapMarker();
    obj_mapmarker.location.set_latitude(this.fs_srcLatitude);
    obj_mapmarker.location.set_longitude(this.fs_srcLongitude);
 
    obj_mapmarker.set_text("Current position");
    obj_mapmarker.set_visible(true);
 
     var tempMapMarker = this.Map00.addItem("MapMarker", obj_mapmarker); 
}

해당 샘플은 Web browser방식 (기존 html5) )환경에서 사용가능한 샘플입니다.

소스 위치

Sample\Application_Etc\np_GoogleMap.xfdl

Google맵을 연동할 수 있나요?

nexacro browser/Web browser 방식(기존 runtime/html5)

googlemap3

nexacro browser방식에서는 Map컴포넌트를 직접 올려 사용이 어렵습니다.
C++기반의 프로그램은 구글 Map key가 있어야 사용이 가능합니다. 
따라서 nexacro browser방식과 Web browser방식(기존 runtime/html5))방식에서 함께 
사용할 수 있는 방법에 대해 알아보겠습니다.

해당 방법은 WebBrowser component를 사용하여 HTML소스를 호출하는 방식이기 때문에

MAP관련된 소스 작업은 별도의 HTML작업이 필요합니다.

여기에 넥사크로플랫폼 과 데이터를 주고 받을수 있도록 document.title = "load";

소스를 추가 하였습니다. HTML의 document.title이 변경이 되면 넥사크로플랫폼의 WebBrowser컴포넌트 이벤트 중 onusernotify 이벤트가 실행됩니다.

주요 소스 내용

넥사크로플랫폼 소스

this.fs_srcLatitude = "42.485374";
this.fs_srcLongitude = "-71.212316";
this.GoogleMap_onload = function(obj:Form, e:nexacro.LoadEventInfo)
{
 this.WebBrowser00.set_url("http://localhost:8080/nexacro/nexacro/Sample/Etc/GoogleMap.html");
}
this.WebBrowser00_onloadcompleted = function(obj:WebBrowser, e:nexacro.WebLoadCompEventInfo)
{
 this.WebBrowser00.callMethod("initialize", this.fs_srcLatitude , this.fs_srcLongitude);
}
   
this.WebBrowser00_onusernotify = function(obj:WebBrowser, e:nexacro.WebTitleChangeEventInfo)
{
 if(e.userdata == "load")
 {
  this.WebBrowser00.callMethod("set_marker", this.fs_srcLatitude , this.fs_srcLongitude);
 }
}

GoogleMap관련 HTML소스

<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<HTML>
<HEAD>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >
  if (! window.NEXACROHTML) {
   window.NEXACROHTML = {};
  }
  window.NEXACROHTML.FireUserNotify = function(userdata) {
   
   if (window.NEXACROWEBBROWSER) {
      window.NEXACROWEBBROWSER.on_fire_onusernotify(window.NEXACROWEBBROWSER, userdata);
   } else {
    
      window.document.title = userdata;
     }   
  }
</script>
<script type="text/javascript">
  var map ;
  function initialize(a,b) {
   
   var mapLocation = new google.maps.LatLng(a, b); // 지도에서 가운데로 위치할 위도와 경도
    var mapOptions = {
      center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
      zoom: 18, // 지도 zoom단계
     mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
            mapOptions);
    window.NEXACROHTML.FireUserNotify("load");
  }
  
  function set_marker(a, b ){
   var markLocation = new google.maps.LatLng(a, b); // 마커가 위치할 위도와 경도
    var size_x = 60; // 마커로 사용할 이미지의 가로 크기
    var size_y = 60; // 마커로 사용할 이미지의 세로 크기    
    // 마커로 사용할 이미지 주소
    var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
      new google.maps.Size(size_x, size_y),
        '',
        '',
        new google.maps.Size(size_x, size_y));
    
    var marker;
    marker = new google.maps.Marker({
        position: markLocation, // 마커가 위치할 위도와 경도(변수)
        map: map,
        icon: image, // 마커로 사용할 이미지(변수)
    //info: '말풍선 안에 들어갈 내용',
        title: '서대전네거리역이지롱~' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
    });
    
   var content = "투비소프트"; // 말풍선 안에 들어갈 내용
    
   // 마커를 클릭했을 때의 이벤트. 
   var infowindow = new google.maps.InfoWindow({ content: content});
  
   google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map,marker);
   });         
 }  
   
</script> 
</HEAD>
<BODY >
<div id="map-canvas" style="width: 100%; height: 400px"></div>
</BODY>
</HTML>
소스 위치

Sample\Application_Etc\np_GoogleMap2.xfdl, Sample\Application_Etc\GoogleMap.html