The Windward Studio

Windward Blog Home

Construct a Google Maps URL with Tags

by
Posted on 07/25/2017

Please Share This

 

Many times printing a map in your report is a great feature but more often there is a need to customize the map image with data points and markers to more effectively tell the story of the data.  Using Windward Import Tags, you will be able to dynamically construct Google Maps images from longitude and latitude coordinates, and apply image markers.  The most common example is placing a map of your company address with your company logo inserted as a marker.  More complex examples would entail creating Google Maps images that contain demographic information.  Whatever your need, Windward has the ability to natively work with the Google Maps API to create maps with markers dynamically in your reports.

Structure of a Google Maps URL

Below is the full structure of how to build a Google Maps URL.  Each parameter is defined along with possible values that can be used.  The full Google Maps API reference link will give you information about any additional functionality you may need.

Google Maps API Reference

https://maps.googleapis.com/maps/api/staticmap?center={INSERT_MAP_LAT_COORDINATES},{INSERT_MAP_LONG_COORDINATES}&size={X_SIZE}x{Y_SIZE}&zoom={INSERT_MAP_ZOOM_VALUE}&maptype={INSERT_MAP_TYPE}&format={FORMAT_TYPE}

 

  • Main Maps URL: https://maps.googleapis.com/maps/api/staticmap?
  • Locations
    • Latitude and Longitude Coordinates: &center={INSERT_MAP_LAT_COORDINATES},{INSERT_MAP_LONG_COORDINATES}
    • Addresses City Hall, New York, NY” should be converted to “City+Hall,New+York,NY”,
  • Map Size: &size={X_SIZE}x{Y_SIZE}
  • Map Zoom: &zoom={INSERT_MAP_ZOOM_VALUE}
    • Values: 1-15 (1-World, 5 Landmass/continent, 10-City, 15-Streets, 20-Building)
  • Map Type: &mapType={INSERT_MAP_TYPE}
    • Values: {roadmap (default), satellite, terrain, hybrid}
  • Map Image Format: &format={FORMAT_TYPE}
    • Values: {png8, png32, gif, jpg, jpg_baseline}
  • Markers: Contains 1 to N markers with the following attributes for each marker
    • &markers={MARKER_SIZE}|{MARKER_COLOR}|{MARKER_LABEL}|${Lat},${Long}|….|${Lat},${Long}
    • size: {tiny, mid, small}. If not parameter set it will default to normal size
    • color:
      • 24 bit Hex code {0xFFFFCC}

or

  • Default color values {black, brown, green, purple, yellow, blue, gray, orange, red, white}
  • label: Specifies single uppercase alphanumeric characters {A-Z, 0-9}. Note: default and mid sizes are only capable of displaying alphanumeric characters.  Tiny and Small sizes cannot display alphanumeric characters.
  • Coordinates: There is not a pre-marker for coordinates but they are listed at the end of each defined marker style separated by the pipe symbol | which is %7C in character form when printed in the full URL. List them as |${Lat},${Long} which is %7C${Lat},${Long}
  • Icon: Custom icons are supported as long as they do not exceed 4096 pixels (64×64 for square images). You can specify the URL for your image following the icon marker.
    • icon:https://wiki.windward.net/@api/deki/files/3063/square_64x64.png?origin=mt-web

Example URL

https://maps.googleapis.com/maps/api/staticmap?center={INSERT_MAP_LAT_COORDINATES},{INSERT_MAP_LONG_COORDINATES}&size={X_SIZE}x{Y_SIZE}&zoom={INSERT_MAP_ZOOM_VALUE}&maptype={INSERT_MAP_TYPE}&format={FORMAT_TYPE}

How does this work with Windward Tagging Technology?

To display a marker on a Google Map, you must first have the URL built, which is shown above.  You must also have the values of your coordinates stored in your datasource.  Values for the zoom, search type, and map type can be hardcoded into the URL manually or optionally placed with variables set either as inputs in your template or retrieved from your datasource.

You can update the URL to include Windward Variables.  In this example, we will only include variables for the latitude and longitude coordinates.  You will need to create 2 variables for Latitude and Longitude using Windward Set Tags in your document referring to the locations in your datasource that match each coordinate values. Optionally you can use a Foreach Tag to loop through many coordinates and then use the ForEach Variable result node for each coordinate in your Import Tag URL.  At this point, you can use the Import Tag to place the static elements of the Google Maps API URL as shown below.  You will need to update the coordinates elements to use the variables for both Latitude and Longitude in the URL in the following format:

Center=${LAT_VAR},${LONG_VAR}

If you are using markers as well and want them to be dynamic, you will also need to update the marker coordinates with your Latitude and Longitude variables.  Keep in mind that markers separate items by a pipe symbol | which is represented in a URL by the characters %7C:

&markers=color:blue%7Clabel:A%7C${Lat},${Long}

  • To display the image, you will need to use the Import Tag to reference a URL.
  • The URL must have the select type set to value, which is denoted by a single apostrophe ( ‘ ) at the beginning of the URL in the select field.
  • The tag type must be set to bitmap to process the returned URL as an image.
  • The Size tag parameter must be set to bitmap in order to respect the bitmap sizes entered during creation of the map in the URL.

Static Google Maps URL Example

‘https://maps.googleapis.com/maps/api/staticmap?center=40.0258498,-105.2217146&zoom=15&maptype=hybrid&size=400×400&format=png32&markers=icon:https://wiki.windward.net/@api/deki/files/3063/square_64x64.png?origin=mt-web%7Ccolor:blue%7Clabel:A%7C40.025701,-105.2195146

 with output →

Dynamic Image Marker using Datasource Values via Variable Reference Example

‘https://maps.googleapis.com/maps/api/staticmap?center=${Lat},${Long}&zoom=15&maptype=hybrid&size=400×400&format=png32&markers=icon:https://wiki.windward.net/@api/deki/files/3063/square_64x64.png?origin=mt-web%7Ccolor:blue%7Clabel:A%7C${Lat},${Long}

with output →

Dynamic Imager Marker using Datasource Values via Variable Reference in a ForEach Loop Example

 

with output →

 

Please Share This



Author: Ryan Fligg

Ryan, Windward's Sales Engineer, has been with Windward since 2006 in many roles as a sales engineer, IT specialist and account executive. Ryan's background fuels his desire to guide Windward's product development. He now works on the future vision of Windward offerings through creating the product roadmap, responding to customer requests, and communicating what Windward is doing and where it’s headed.

Other posts by


Feedback & Support