Introducing GoogleMap

GoogleMap is the component used to display the map provided by Google on the screen. To use Google Maps, you need to create the HTML page and load it using the API provided by Google, but if you use the GoogleMap component, then you can control Google Maps more easily.

Example

The following is the screen of the bicycle rental service using the Google Maps called Citi Bike. The location and availability of the bicycles are marked with markers on the map, so the user can understand the information just by looking at the map.

Showing Map

Let us create an example that displays the map on the screen using the GoogleMap component.

Create the GoogleMap and Button components on the form.

Write the onclick event function of the Show Map button as follows.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 12);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.set_showzoom(true);
};

The arguments of the load method are whether to use the user gps, the north latitude coordinates, the east longitude coordinates, the map mode, and the zoom level from the front. Please refer to the reference guide for more information on the arguments.

Setting the showzoom property to true displays the zoom button on the map. Press the + button to zoom in and press the - button to zoom out.

Run QuickView (Ctrl + F6) to check the result. Click the Show Map button to display the Boracay map on the screen, and you can zoom in/out the map using the mouse and keyboard.

apikey

In order to use the GoogleMap component, the API KEY value must be entered before calling the load method. If you do not enter the API KEY value, then the map is exposed with the watermark displayed as shown below.

Adding/Removing Marker on Map

You can add or remove markers at specific coordinates of the map loaded in the GoogleMap component. Markers are used to mark something on the map.

Example

The following is an example of outputting Boracay Island (latitude 11.96832946, longitude 121.922996308) on Google Maps and displaying the marker at the same coordinates. Each of the buttons in the example functions as follows.

sample_googlemap_02.xfdl

Core features used in the example

load

This is the method that loads Google Maps on the screen. You can set whether to use the user GPS information, latitude, longitude, map mode, and zoom.

this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);

showzoom

This is the property that sets whether to display the zoom (zoom in/out) control on Google Maps.

GoogleMapMarker

This is the object used to display the marker at specific coordinates on the map. You can set marker properties (draggable, imageurl, latitude, longitude, text, visible).

addItem

This is the method that adds items (markers, circles, lines, and polygons) to be displayed on Google Maps. You need to set the item ID differently when adding multiple items.

removeItem

This is the method that removes items (markers, circles, lines, and polygons) displayed on Google Maps. If it is used in the state that there is no added item, then false is returned and the onerror event occurs.

How to implement an example

Create the GoogleMap and Button components in the form as shown in the example.

Set the enable property of the Add Marker, Del Marker buttons to false.

Write the onclick event function of the Show Map, Add Marker, Del Marker buttons as follows.

• Show Map Button Event Function

Displays the map of specific coordinates on the screen.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.set_showzoom(true);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);
};

• Add Marker Button Event Function

Creates the GoogleMapMarker object, sets the property, and adds the marker on the map with the addItem method.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGoogleMapMaker = new nexacro.GoogleMapMarker();
	
	objGoogleMapMaker.set_latitude(11.96832946);
	objGoogleMapMaker.set_longitude(121.922996308);
	objGoogleMapMaker.set_text("Default Marker");
	objGoogleMapMaker.set_draggable(true);
	objGoogleMapMaker.set_visible(true);
	
	this.GoogleMap00.addItem("MapMarker", objGoogleMapMaker);
	
	this.Button01.set_enable(false);
	this.Button02.set_enable(true);
};

• Del Marker Button Event Function

Removes the marker added to the map.

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.removeItem("MapMarker");

	this.Button01.set_enable(true);
	this.Button02.set_enable(false);
};

• GoogleMap onload Event Function

This is the event that occurs when the map of GoogleMap is loaded normally.

this.GoogleMap00_onload = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapEventInfo)
{
	trace("loading succeed");
	
	if(this.GoogleMap00.items[0])
	{
		this.GoogleMap00.removeItem(this.GoogleMap00.items[0]);
	}
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);
};

• GoogleMap onerror Event Function

This is the event that occurs when the operation of GoogleMap fails.

this.GoogleMap00_onerror = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapErrorEventInfo)
{
	trace("error: " + e.errormsg);	
};

Run QuickView (Ctrl + F6) to check the result.

Click the Show Map button to display the Boracay map on the screen, and you can zoom in/out the map using the mouse and keyboard. Clicking the Add Marker button adds the marker to the screen, and clicking the Del Marker button removes the marker.

Adding/Removing Circle on Map

You can add or remove circles at specific coordinates of the map loaded in the GoogleMap component.

Example

The following is an example of outputting Boracay Island (latitude 11.96832946, longitude 121.922996308) on Google Maps and displaying the circle at the same coordinates. Each of the buttons in the example functions as follows.

sample_googlemap_03.xfdl

Core features used in the example

load

This is the method that loads Google Maps on the screen. You can set whether to use the user GPS information, latitude, longitude, map mode, and zoom.

this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);

showzoom

This is the property that sets whether to display the zoom (zoom in/out) control on Google Maps.

GoogleMapCircle

This is the object used to display the circle at specific coordinates on the map. You can set circle properties.

addItem

This is the method that adds items (markers, circles, lines, and polygons) to be displayed on Google Maps. You need to set the item ID differently when adding multiple items.

removeItem

This is the method that removes items (markers, circles, lines, and polygons) displayed on Google Maps. If it is used in the state that there is no added item, false is returned and the onerror event occurs.

How to implement an example

Create the GoogleMap and Button components in the form as shown in the example.

Set the enable property of the Add Marker, Del Marker buttons to false.

Write the onclick event function of the Show Map, Add Marker, Del Marker buttons as follows.

• Show Map Button Event Function

Displays the map of specific coordinates on the screen.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.set_showzoom(true);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);
};

• Add Circle Button Event Function

Creates the GoogleMapCircle object, sets the property, and adds the circle on the map with the addItem method.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGoogleMapCircle = new nexacro.GoogleMapCircle();
	
	objGoogleMapCircle.set_latitude(11.96832946);
	objGoogleMapCircle.set_longitude(121.922996308);
	objGoogleMapCircle.set_radius(1000);
	objGoogleMapCircle.set_visible(true);	
	
	this.GoogleMap00.addItem("MapCircle", objGoogleMapCircle);
	
	this.Button01.set_enable(false);
	this.Button02.set_enable(true);			
};

• Del Circle Button Event Function

Removes the circle added to the map.

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.removeItem("MapCircle");
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);			
};

• GoogleMap onload Event Function

This is the event that occurs when the map of GoogleMap is loaded normally.

this.GoogleMap00_onload = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapEventInfo)
{
	trace("loading succeed");
	
	if(this.GoogleMap00.items[0])
	{
		this.GoogleMap00.removeItem(this.GoogleMap00.items[0]);
	}
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);	
};

• GoogleMap onerror Event Function

This is the event that occurs when the operation of GoogleMap fails.

this.GoogleMap00_onerror = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapErrorEventInfo)
{
	trace("error: " + e.errormsg);	
};

Run QuickView (Ctrl + F6) to check the result.

Click the Show Map button to display the Boracay map on the screen, and you can zoom in/out the map using the mouse and keyboard. Clicking the Add Circle button adds the circle to the screen, and clicking the Del Circle button removes the circle.

Setting Language & Regional Characteristics Displayed on Map

You can set the display language and regional characteristics of the GoogleMap component. In the case of Dokdo, which is Korean territory, it is displayed differently depending on the regional characteristics setting.

Example

When the button is clicked, the map screen with language and region settings is displayed. Language and region cannot be changed after setting when loading the screen. If you want to set the different languages and regions, then you need to use it after refreshing the screen.

sample_googlemap_04.xfdl

Core features used in the example

language

Sets the language to be displayed on Google Maps.

region

Sets the region to be displayed on Google Maps. The same place name may be displayed differently, depending on the corresponding setting.

How to implement an example

The map location was set to the coordinates where Dokdo is displayed. Specify language and region property values before loading.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.GoogleMap00.set_showzoom(true);
    this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);    
    this.GoogleMap00.set_language('ko');
    this.GoogleMap00.set_region('KR');
    this.GoogleMap00.load(false, 37.243158, 131.869202, 3, 15);
};