The Synchronized Google Maps User Interface
On October 14 2011, the Synchronized Google Maps software and user interface was updated.
This page will discuss how to use Synchronized Google Maps. After displaying snapshots of the user controls and a sample with 4 synchronized maps, we will step through how to use the controls and how to interact with the maps. At the bottom of this page, there is a link to additional technical documentation and source code.
Here is a snapshot of the user controls at the top of the Synchronized Google Maps user interface.
Here is a snapshot of 4 synchronized maps. What you see below is the default arrangement of maps shown when the user clicks on the Map Panels radio button 4.
The maps are synchronized in the sense that the map centers are identical. This relationship is maintained even if the user drags one of the maps with the mouse. This is quite convenient when comparing road maps, satellite maps, and terrain maps.
The default arrangement of the four maps is summarized in the table:
|Road Map||Hybrid Satellite Map|
|Terrain Map||Satellite Map|
This default arrangement was chosen because the road map and the hybrid satellite map (with labels) appear to be the most useful. These are the maps that will be seen if 2 map panels are selected. Furthermore, if 4 map panels are selected, then the satellite map will be directly underneath the hybrid satellite map which makes comparison easy.
It is possible to change this default arrangement by use of the Google controls embedded in each map or by query parameters.
We will now discuss the Synchronized Google Maps user interface in detail. For convenience, we display the user controls once again.
The Select Location dropdown menu is populated by a list of location names that is associated with latitude and longitude data and with optional zoom level data. The association of the entities
is maintained in a separate text data file. This text data file is provided by the developer of the site from which you are accessing the Synchronized Google Maps.
You may view the Northeastern University location file by clicking
on the link
At Northeastern University, this location file provides access to the campus buildings and to other places of interest.
The Find Location button will search for a geographic location based on information typed by the user into the large text box that is just to the right of the button. The search for the location will be done by the Google search server.
Once the search location information has been typed in, you may initiate the search simply by pressing the return key. It is not necessary to mouse over and click the Find Location button.
If a geographic location is found by the Google search server, then the first such location will become the center of the map and a marker will be placed at that position.
If no geographic location is found, then the user will be notified in an alert box.
Note that the search location information entered by a user may only contain the following characters: letters, numbers, blanks, commas, periods, hyphens, and parentheses.
The button opens up this explanation of the Synchronized Google Maps user interface in a new tab.
The button causes the maps to zoom in by one level.
The button causes the maps to zoom out by one level.
The minimum zoom level is 0 but that is so far removed from the map details as to not be very useful.
The maximum zoom level is 20 for road maps and for variants of satellite maps. The maximum zoom level for terrain maps is 15. The zoom software will keep track of the maximum zoom desired for all synchronized maps but will not force a terrain map beyond zoom level 15.
The Map Panels control provides four radio buttons numbered 1, 2, 3, 4 to select the number of synchronized maps that will be displayed at once. By default, one map is initially displayed. This default may be changed via a query parameter.
The Lite check box determines how many of the user controls will be displayed. The default is that the Lite check box is unchecked. In that case, all user controls will be displayed. If the Lite check box is checked, then only the first 3 rows of the user controls will be displayed:
This simpler interface is called lite mode.
Note that by using the query parameter
lite=true one can make
Synchronized Google Maps open in lite mode.
The Set Center button will set the map center using the latitude and longitude values supplied by the user in the Lat and Lng text boxes.
Conversely, if the user drags any one of the synchronized maps, the centers of all maps will be changed to the new center. This is why we call the maps synchronized. Furthermore, as a map is dragged by the user, the latitude and longitude values of the map center will be updated in real time in the Lat and Lng text boxes. The curious user may find this latitude-longitude information interesting.
The real time latitude-longitude update is also extremely useful for developers. This is the tool needed to find the necessary latitude and longitude values to fill in the data for the Select Location dropdown menu.
Note that you may set the center by pressing the return key in either the Lat or Lng text box. It is not necessary to mouse over and click the Set Center button.
The Set Zoom button will set the zoom level between values of 0 to 20.
Actually, the situation is more subtle. Terrain maps do not at present zoom beyond level 15. Therefore, the software will set the zoom level of the other map types up to 20 but will freeze the zoom level of a terrain map at a maximum of 15.
This effect is visible in the snapshot of the 4 maps above. The zoom level for 3 of the maps is set to 16. The zoom level of the terrain map is set to its maximum of 15.
Note that you may set the zoom level by pressing the return key in the zoom text box. It is not necessary to mouse over and click the Set Zoom button.
The Mark Center button will place a marker at the current center.
Recall that the Find Location control will automatically place a marker at the location it finds.
Any marker that is placed on a map may be clicked. Upon a click, an alert box will be shown.
The Remove Markers button will remove all markers that have been placed on the maps.
The Google Maps image is a link that will open up the standard Google Maps application in a separate tab.
The Google Maps application will open with a map that has the same center and zoom level as the current maps and the same map type (map, hybrid, terrain, or satellite) as the map in the top left position.
This facility is useful because the standard Google Maps application has features that have not yet been released in the developer version of Google Maps that is used here. For example, one may access traffic information and one may print road maps.
The Make Link to Current Synchronized Maps control will construct a link that will recreate the current state of the Synchronized Google Maps as far as is possible. When that control is clicked, the link is created and shown as follows:
The link is automatically selected so it may immediately be copied
to the clipboard for pasting elsewhere. For example, the link may
be pasted into an e-mail or be used by a developer as an
href on a web page.
As an illustration, here is the link to the above example. This link was obtained by copying the link from the original maps page and pasting the link into the reference below.
Link To Maps Example
To close the link text box, click on the box
The Google Maps API also provides 2 standard controls within each map. The first standard Google Maps API control is the map-type-selection control:
Using this control in a map, the user may decide which map type is shown in that map. By manipulating this control in all 4 maps, the user may override the default map arrangement described above. Furthermore, if the Make Link to Current Synchronized Maps control is then used, the created link will encapsulate this user defined arrangement of the map types.
The Map side of the control allows the user to select a regular road map or a terrain map.
The Satellite side of the control allows the user to select whether labels are shown or not. Showing labels is the default and such a map is called a hybrid satellite map.
If the zoom level is high, it may be possible to show the satellite map at a 45-degree angle. It that case, this choice is also found when the Satellite side of the control is clicked.
The other standard Google Maps API control is the pan-streetview-zoom control:
If the available space for the map on the screen is small, some or all of the pan-streetview-zoom control may not be displayed.
To discuss the pan-streetview-zoom control, let us break it into its 3 parts.
The upper part of the pan-streetview-zoom control is the pan control:
The active parts of the pan control are the 4 directional arrows. When the user clicks on a directional arrow, the map is panned by 1/3 of its size in that direction.
The middle part of the pan-streetview-zoom control is the street view control:
The user initiates street view by dragging the icon of the person onto the map. The streets for which a street view is available will be highlighted in dark blue. When the user drops the icon on such a street, a street view overlays the map.
Within street view, the pan control becomes a rotation control. The rotation angle appears to be 40 degrees since 9 clicks comes full circle.
The street view overlay can be dismissed via a close box in the upper right corner.
Note that if multiple maps are displayed, street view is only shown in the map where it is initiated.
The lower part of the pan-streetview-zoom control is the zoom control:
The zoom level may be controlled either with the
- buttons or with the zoom slider.
The behavior of the
- buttons in
the zoom control is similar to the buttons at the top of
the Synchronized Google Maps control with one exception.
If you use the zoom control within a map, the zoom
constraints for that map dominate the behavior for all maps.
In particular, if you use the zoom control in a terrain map,
then the zoom range will be limited to 0 to 15 and this will apply
to all maps.
For access to technical documenation and source code, go to:
The Synchronized Google Maps Story