Support > Repository > Screen function > Map view (Google Maps)

You can use any address item to display any model on Google Maps.

Google Maps is not a free service at any time.you have toPlease confirm the following contents.

  • For information about using the Google Maps API,Google Map API Terms of Service (Google Maps API Terms of Use)Please follow.
  • Jasmine software does not guarantee the functions and services of the Google Maps API itself.
  • The Google Maps API is scheduled to be upgraded on a regular basis.If the version of the Google Maps API is upgraded, it will correspond with Wagby released later.
  • When a malfunction occurs in the Google Maps function, Jasmine Software decides whether the cause is in the Jasmine software implementation part or the Google Maps API part.When the cause is in the Jasmine software implementation part, we respond within the range of support.If the cause is in the Google Maps API part, we will judge whether it can be absorbed by the implementation part of Jasmine software and respond within the scope of support.
  • From June 22, 2016, API usage over 25,000 times a day is chargeable.

In summary, "sites accessible only for paid customers", "sites that can be accessed only from inside the company or on the intranet" "applications related to corporate delivery operations, vehicle management, corporate property management, or similar applications" For "Applications using APIs over 25,000 times a day", purchase of the Google Maps API for Business license is required.For details, please select "Japan" in company's "partner directory" to see if it is necessary to purchase license.

If you use the new Google Maps API after June 22nd 2016, you will need the API key. (Those who used it before, have no effect.)

1. Obtaining the API key

To obtain the Google Maps API, please use "Google Maps API> For the webPlease go from.

2. Register API key7.9.2

Set the API key in the "Google Maps" field provided on the "Environment> Application" tab.

Figure 1 Setting the API key

If you use the free version, the license type will be "Standard".If you subscribe to the paid version, please make the license classification "premium".

When using Wagby before R 7.9.2

Set the acquired API key manually. Please read "$ {content_8_name}" for details.

Here is an example of preparing a "store" model with map view function enabled.One set of latitude and longitude information can be stored in one data.(Figure 2)

Figure 2 Points are displayed on the map on the detail screen

On the list display screen, points are displayed on the map as many as the number of data.(Figure 3)

Figure 3 Multiple points are displayed on the map on the list screen

Model definition

Figure 4 shows the definition of the store model."Address" "latitude" "longitude" prepared here is an essential item when using map view.

Figure 4 Definition of store model

Screen definition

Enable "Screen> View> Map View".

Figure 5 Map view definition

Assign item of model to item setting field.There are the following rules.

In the following table "essential"Mandatory input check is doneThatIt is not.It means that you always want items to be prepared.

Setting value Type of corresponding item Description Required
name String When you move the cursor to the marker displayed in the map view on the list display screen, the data of the item specified by the name is displayed with a balloon.(If "Name" is not specified, the data of the item specified as "Address" will be displayed.) -
Street address String When you click the "Get Coordinates" button, we will use the Google Maps API to obtain the latitude and longitude from the address.
latitude 8 byte floating point Based on this coordinate information, a marker is displayed in the map view.
Upload update functionIn order to register address data etc. using, you also need to fill in latitude and longitude items.If latitude/longitude information is unknown, set "0 (zero)" instead of blank.
longitude 8 byte floating point Based on this coordinate information, a marker is displayed in the map view.
Zoom level integer The scale level of the map.Specify it in the range of 0 to 20. -
radius 8 byte floating point The radius of the circle to be drawn in the map view.The unit is m. -
MBR String Coordinate information of the image to be placed in map view. -
Overlay image URL File path (URL) of the image to be placed in map view. -

Other settings are as follows.

page title

Sets the page title.If not specified, it becomes "model name _ map view".

Explanatory text

You can prepare descriptive text for map view. Apart from the description of the screen, it will be displayed at the bottom or right of the map, according to the display position of the map view.

Map type

Specify "Google Maps".

Map display position

Specify the display position of the map.You can select "left" or "down"."Left" is specified by standard.

Map display ratio

It is valid when map display position is "left". It becomes "50%" when it is blank.

Map size

Specify the width and width of the map in pixels.The unit can be omitted.When it is blank, it becomes vertical: 360px, horizontal: 360px.

In map view, there are the following rules.

Specifying search items

Please validate the search condition in "latitude" "longitude" "address" item.
Please enable range search for "latitude" "longitude".

Specify list display items

Please add "latitude" "longitude" "address" items to the list display screen.You can also make "latitude" "longitude" a hidden item.

Do not set read-only settings

"Latitude" "Longitude" "Address" itemsSpecify read onlyToNot performedPlease do.

Behavior of list display screen

It is not possible to specify "Handle search condition input screen and search result list display on the same screen".

Used with wizard

When using the map view and the wizard together, specify the same page number in the wizard column for the items for which you set the map view column.

When specifying overlay image

MBR specification is mandatory when "Overlay image" is specified.

When specifying MBR

The text area can not be specified as MBR.

In the list display screen, the marker is displayed on the map view based on the latitude/longitude information of the listed data. When you move the cursor to the marker, the data of the item specified as "Name" is displayed as a balloon (If "Name" is not specified, the data of the item specified as "Address" is displayed.)

Clicking on the marker on the map view transitions to the detail display screen of that data.

Figure 6 List display screen

Definition method

Items specified as "Name" in map view are also displayed on the list display screen.

Figure 7 Specifying name field of map view
Figure 8 Map view name items also used in the list display screen
For data for which latitude and longitude are not registered, markers are not displayed on the map.

Specify the range of the map display when opening the search screen

In the standard map display range is "whole world".You can limit the range by setting the initial value of latitude and longitude items "when search screen" and "when displaying search screen (upper limit item of range search)".The zoom level can also be set.

radius

Pressing the "R" button in map view puts you in circular drawing/display mode. You can change the radius of the circle by dragging and dropping another marker.

The radius of the circle is set to the item "radius".The item "radius" can be manually entered.The unit is meters.

To view the radius on the detail screen, please press the "R" button as well.

Figure 9 Input radius

MBR (minimum bounding rectangle)

Pressing the "MBR" button in the map view puts you in the MBR drawing/display mode. You can change the MBR rectangle by dragging and dropping another marker.

The value of MBR is latitude and longitude and it has the format "(x1, y1) - (x2, y2)".Manual input is also possible.It is set to the item "MBR".

If you wish to see the MBR on the detail screen, please also press the "MBR" button.

Figure 10 Display of MBR

Overlay image

While using MBR, if the URL indicating the image file is specified in the item "overlapping image", that image is displayed in the rectangle.You can link arbitrary images with markers.You can change the transmittance of the image with the slider under the "MBR" button.

To see overlapped images on the detail screen, please press the "MBR" button as well.

Fig. 11 Display of overlay image

Specify color

You can specify the color of the marker.

Figure 12 Specifying the color of the marker

Color is managed as hexadecimal in RGB format.(Since it is a hexadecimal number, "#" is prefixed.)

Figure 13 I changed the color of the marker
Instead of hexadecimal notation, you can specify 10 kinds of character strings "black" "brown" "green" "purple" "yellow" "blue" "gray" "orange" "red" "white".

Use images

Please prepare the image in advance.Here we create a "GoogleMap Marker Image" model and prepare four icons in advance.

Figure 14 GoogleMap Marker Image Model

The sample icons are as follows.

Figure 15 Sample Icon

Specify the marker image icon.

Figure 16 Specifying marker image icon (1)
Figure 17 Specifying marker image icon (2)
When both marker color and image are specified, priority is given to the image.

Definition method

First, prepare "GoogleMap Marker Image Model" to manage images of markers.It is similar to the choice model definition.We do not set expressions and initial values.It is a simple model.

Figure 18 Defining the GoogleMap Marker Image Model
If you only set the color of the marker and you do not specify an image, you do not need to define this model.

In the model using GoogleMap, add three items: "Marker color" "Marker image icon" "Marker image URL".

Figure 19 Adding items related to colors and images

"Marker image icon" refers to the "GoogleMap marker image model" prepared above.

Figure 20 Marker Image Icon Item

"Marker image URL" is a reference linked item.

Figure 21 Marker Image URL Item

In the map view setting, specify the item corresponding to "marker color" "marker icon URL" respectively."Marker icon URL" specifies "marker image URL" (which is a reference linkage item).

Figure 22 Map view settings
You can also define "marker icon URL" as a string type rather than linked reference item.In that case please make sure to enter the image directly in the URL.

Correspondence to the list display screen

Marker colors and images can also be displayed on the list display screen.

Figure 23 Application to list display screen

"Marker color" "Marker icon URL" will be applied to the list display.

Figure 24 Including in list items

In addition, these items can be "hidden items on the list display screen".This minimizes the contents of the list display.

Fig. 25 Make it hidden

Image download

You can download the four images introduced here.Please expand the downloaded file to the folder where Wagby is installed.Four png files are copied into the customize/webapp/img folder.

If you use the new Google Maps API after June 22nd 2016, you will need the API key. In case of using Wagby up to R 7.9.1, after acquiring the API key, manually do the following correspondence.

1. Open and modify __mapview.xml in the following folder with a text editor.(Please do not use Windows OS Notepad.)

wagbyapp/webapps/wagby/WEB-INF/applicationContext/__mapview.xml

Before correction:

<bean id="googlemap_key"
      class="java.lang.String">
   <constructor-arg index="0" value="maps.google.com/maps/api/js?sensor=false" />
</bean>

Revised:

<bean id="googlemap_key"
      class="java.lang.String">
   <constructor-arg index="0" value="maps.google.com/maps/api/js?sensor=false&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</bean>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Please specify the API key obtained from Google.

2. Copy the above __mapview.xml to the customize/webapp/WEB-INF/applicationContext/folder.

3. Start the wagbyapp application and check the operation.