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
 
Search WWH ::




Custom Search