Add a Google Map to Your App

23 Jul

Map IconIf you’re building a walking or city tour with the TourSphere builder, allowing the user to track their position in relation to all the sites in your app is essential. Here’s a quick intro and tutorial on how to use our Google Map widget.

What is the Google Map widget?

This widget allows you to add a map to any page in your app, create site markers, and define links that connect the user to various sites in your app. In your final app, when the user taps a marker, they are taken to the desired point of interest.

Before you dive into maps, you’ll want to make sure you have a few point of interest pages built in your app.

How to Add a Map

When you are in your project, click the green add Add button to open the widget drop-down menu. Select the Google Map widget. This will drop the widget onto your page and open the map editor. You will be prompted to enter a city name or address—this can either be the general area of your tour or the starting location of the first stop. Once you enter the address, you will be zoomed into that area, setting the stage for building your map.

How to Add and Set a Marker

There are two ways to add markers. With the map editor open, click the green Add Marker button on the top left. You can then enter a specific address location—you’ll see the marker fall onto the page. The other method is to zoom in on the map to the desired location and click on the map itself to drop the marker.

Once you’ve added a marker, you’ll see a new drop-down menu appear at the bottom of the page. This is where you will select a page in your app to link to the marker.

The second option, under the Link menu, is to title the marker. This title appears in the pop up bubble the user sees when they tap the marker and the optional site list. The widget automatically pulls the title of the page you have linked, but you can choose to enter an alternative title in this field. Don’t forget to save!

The Marker List

In the map editor, on the right you will see a list of all the markers added to your map. If you want to edit a specific point of interest, use the Search feature to quickly find a specific marker. Click on the marker title and you will see the editing options reappear at the bottom.

If you hover over one of the marker titles, you will see the marker jump on the map to locate it visually on the map.

How to Edit Markers

You can edit your markers by clicking on the marker directly or by clicking on the title in the marker list. Either method will open the link and title editor.

Edit your marker location at anytime by dragging and dropping the marker itself to a new location on the map.

Map Options

There are features you can enable on a map-by-map basis. They can be accessed by clicking the green button labeled Map Options in the top right of the map editor window. Check off an option to enable it.

The three optional features that can appear as icons in the left corner of any map are:

    GPS—Allows users to pinpoint their location on the map.
    Home—The user ultimately will zoom and pan around the map. This feature allows the user to re-center the map to its original position.
    List—Displays a list of all the points of interest defined in the map. The text in this list is determined by the individual page titles.

If you are building your app for optimal viewing on tablet devices, you may want to consider displaying your map as an inset view. This adds additional padding to the bottom of the map so it does not take up the full screen.

Positioning the Home View of the Map

As you add markers, you’ll pan and zoom around the map. When you leave the map editor, the last position the map was in is the “Home” position—the area that user sees when they access the map for the first time in the final app. After all of your markers have been added, zoom out a bit so all of the markers are clustered towards the middle of the map. Exit the editor and use the app preview function to view how the map and markers look. If necessary, re-open the editor and make a series of small tweaks to the position.

We find best practice is to zoom out to reveal all of the markers and the entire area the tour covers. However, you can also zoom in to show the detail of the starting position of the tour. Either way, keep in mind the Home position will change a bit from device to device depending on the screen ratio.

Marker Numbers

If you have a sequential tour, you can label each marker with a site number. The site number is set in the individual page settings. Access the page settings by closing the map editor and going back to your pages. Select any tour site page and click on the header—the gray bar at the top where the page title appears. In the editor that appears on the left, enter the Site Number and click Save. The Google Map will automatically pull each site number and tie it to the corresponding marker.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: