HTML and CSS Reference
In-Depth Information
Figure 12-10.
Adding a pushpin in the current location
One of the most common uses of maps in a web page is to show where there are nearby locations. For
example, you might have multiple store locations and you'll want to show where each one is. Or perhaps you are
in a police department and want to map out where certain crimes have been committed. You could have a public
transit system and want to show where all the bus or train stops are.
Each of these scenarios is basically the same; you have a collection of locations that you want to show on a
map. You can add as many locations as you want. For each, just create a Pushpin object and add it to the entities
collection. If you have more than one location you should make the pushpins look different so the user can easily
distinguish between them.
For this demonstration, you will indicate where there are nearby restrooms. Instead of a standard pushpin
you will use an image with a familiar restroom icon. Normally you would query the server to get a list of locations
based on the where the client is. However, to simplify this exercise these will be hardcoded.
■
i am hardcoding the location of the restrooms, which are probably nowhere near where your current
location is. You can either provide different restroom locations that are near you or simply override your current loca-
tion to match mine. This will be consistent with the restroom locations.
Caution
eXerCISe 12-4. aDDING CUStOM pUShpINS
1.
in the Solution Explorer, right-click the Chapter12 project and select the Add ➤ new
Folder links. Enter the name Images.
The source code download contains a
restroom.gif
image file. drag this onto the
images folder in the Solution Explorer.
2.
Add the following declaration at the top of the existing
script
element. This defines
the locations of the restrooms.
3.
