Interlocking Google Maps

This explains about a way of interlocking of GoogleMap in nexacro platform.

Google Maps needs license.

(According to service type in client company, License may need. Please use GoogleMap after making sure the license.)

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

Pre-preparation

You need to define the Map in TypeDefinition to use the Map.

googlemap1

Web browser mode (html5)

googlemap1

Main Source Content

//Map Coordinate
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);
}
//Handling Marker after loading the Map completely    
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); 
}

This sample is available to use in Web browser (html5) environment.

Source Location

Sample\Application_Etc\np_GoogleMap.xfdl

Is it possible to interlock the Google Maps?

nexacro browser/Web browser mode(runtime/html5)

googlemap3

It is dificult to use Map component directly on nexacro browser mode.
Program based on C++ needs Google Map key to use.
Let's find out a way to use Google Maps on  nexacro browser mode and Web browser mode(runtime/html5)

This way calls HTML source using WebBrowser component. So source work related to MAP needs HTML work.

We added document.title = "load"; source to communicate data to nexacro platform.

When document.title of HTML is changed, onusernotify event of WebBrowser component in nexacro platform is called.

Main Source Content

Nexacro platform source

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

HTML Source related to GoogleMap

<!-- 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); // Latitude and Longitude to be located at center in the map
    var mapOptions = {
      center: mapLocation, // Latitude and Longitude (Variable) to be located at center in the map 
      zoom: 18, // The map zoom phase
     mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, This has to be the same as id of div tag in body.
            mapOptions);
    window.NEXACROHTML.FireUserNotify("load");
  }
  
  function set_marker(a, b ){
   var markLocation = new google.maps.LatLng(a, b); // Latitude and Longitude where marker to locate
    var size_x = 60; // Width of image to be used as maker
    var size_y = 60; // Length of image to be used as maker   
    // Image address to be used as maker
    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, // Latitude and Longitude (Variable) where maker to locate
        map: map,
        icon: image, // Image(Variable) to be used as maker
    //info: 'Content to be in speech bubble',
        title: '서대전네거리역이지롱~' // Title when mouse's point moves to maker
    });
    
   var content = "투비소프트"; // Content to be in speech bubble
    
   // Event when marker is clicked.
   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>

Source Location

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