Information Technology Reference
In-Depth Information
Dealing with Global State
Next, we set up some global state variables that give you a good idea of what we're
going to do to make our transit application work.
var myLatLong;
var myTransitMap;
var myLocalSearch;
var searchResults = [];
The variable names are hopefully descriptive of their purpose, but in case there's any
doubt, we'll use
myLatLong
to hold the user's coordinates;
myTransitMap
represents the
map of the user's location and eventually will also include the nearby transport options;
myLocalSearch
is the search object, which will house our criteria for finding relevant
transport options; and finally the
searchResults
array will hold the results returned from
our
myLocalSearch
search.
Customizing Location Markers
If you've ever used an online map service (of any kind) you're probably familiar with the
virtual "Map Pins" that are used to pinpoint locations. In our example, as we're using
Google maps, we use the
google.maps.Marker
object to denote specific locations on
our maps. Rather than use the vanilla red map marker icon that comes by default with
Google Maps, we've crafted some custom markers for our Move Me application. The
code for our custom
google.map.MarkerImage
graphics is as follows.
var resultMarker = new google.maps.MarkerImage(
"Red_Train_Marker.png",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var youMarker = new google.maps.MarkerImage(
"You_Marker.png",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
The two
.png
image files referenced are included in the source code with this topic. The
first,
Red_Train_Marker.png
, is styled on the normal red pin used by Google Maps, with
the addition of the letter T, for transit or transport. The
You_Marker.png
map pin is a blue
marker with the word "You" superimposed. We've specified the normal size for our map
pins, to aid the user when they want to tap the marker to see the "info bubble" for more
details on a given point. This makes the pins look somewhat larger on small phone
screens, but keeping the normal size is important in order to make it less likely that the
user will miss touching the pin when they press the screen.
You will note that both
MarkerImage
objects have two calls to
google.map.Point()
. The
first sets the origin point for the image to be used as an overlay. In our preceding
examples, we're not changing what would be the default. The second call to
google.map.Point()
sets the anchor for the image. By default, when a