Adding a Google Map

How to:

Once you have configured Google Map controls and created a WebFOCUS procedure to get a center value, you may add the Google Map through the Insert menu of the HTML Composer.

Top of page
x
Procedure: How to Insert Google Maps in the HTML Composer
  1. Create the HTML Layout Page that contains the Google Map.
    1. From Developer Studio Explorer, select the HTML Files folder in the desired project directory.
    2. Right-click and select New/HTML File from the context menu.

      The Add HTML File dialog box appears.

    3. Type GoogleMaps as the File name and click Open.

      The HTML Composer opens.

  2. From the Insert menu, select Components, then click Google Map.

    The cursor changes into a crosshair.

  3. Click and drag the crosshair to create the Google Map object and adjust it to the size you want.

    The Map Properties dialog box appears, from which you can set the map and layers properties for the Google Map. For details about using the Map Properties dialog box, see Customizing the Google Map Properties.

    The Google Map control also has a set of properties for the object. For more information about setting these properties, see How to Access the Google Map Properties.

  4. Click OK to close the Map Properties dialog box.

The Google Map appears as an image in the HTML Composer, as shown in the image below.
Top of page
x
Procedure: How to Access the Google Map Properties

Once a Google Map is added to the HTML Composer, the Google Map properties are available from the Properties tab in the Properties window.

  1. Select the Google Map object in the layout.

    Note: The Google Map object appears as googlemapcontroln in the Properties window drop-down list.

  2. To adjust the size or position the Google Map object, edit the Position: Left/Top and Size: Height/Width fields in the Properties window. The other properties listed in the Properties window are standard properties for a <DIV> object.

    Note: You may also adjust these properties by dragging the Google Map object, and its borders, in the Design View.

    Tip: If the Size: Height property is greater than 280px, a Zoom In and Zoom Out slider control appears on the Google Map. If the Size: Height property is less than 280px, the Zoom In and Zoom out plus/minus icons appear on the Google Map.

  3. Select the Google Map ellipsis button from the Properties window to open the Map Properties dialog box.

    or

    Double-click the Google map object, or select Google map from the right-click context menu.

The Map Properties dialog box opens, from which you can customize the Google Map properties.

WebFOCUS