Display maps with canavs components
Estimated duration : 45 minutes
Presentation :
This is the second part on "Canvas mapping". If you have not seen it, you may wish to view the first part, ealrier in this chapter.
What we will do :
- change map scale : Zoom/unzoom with buttons,
- Pan Map horizontally when dragging
- change map type :roadmap, satellite, hybrid.
What we will learn :
Input Resources :
None : start with creating a new project.Reminder on static maps and streetview APIs :
“The Google Static Maps API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Google Static Maps API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page"
This is also the case for streetview and 360° inside buildings views.
Documentation for the staticmaps and streetview APIs can be found here :
- https://developers.google.com/maps/documentation/static-maps/intro
- https://developers.google.com/maps/documentation/streetview/intro
(you can add ?/hl=en or ?/hl=fr or ?/hl=es to change the language)
What is useful for us is :
- The base address (scheme and host) :
- for static maps
- https://maps.googleapis.com/maps/api/staticmap?
- or http://maps.google.com/maps/api/staticmap?
- and for streetview
- https://maps.googleapis.com/maps/api/streetview?
- or http://maps.googleapis.com/maps/api/streetview?
- for static maps
- The static maps query fields (separated by ‘&’):
center defines latitude and longitude of map center (e.g. "40.714728,-73.998672").
It may also be an address (replace space by +)size rectangular dimensions of the map image (e.g. canvas size) with a string of the form {horizontal_value}x{vertical_value}.
Note : be careful that the size is not too big to avoid delay times with low bandwidth.maptype defines the type of map to construct. We will use and switch between roadmap and satellite (also available in API: hybrid and terrain). zoom defines the display scale from : 0 for world, 10 for cities and 21 for street level. Adding 1 to zoom level will divide pixel size by 2. markers defines markers overlaid on the map (the ‘|’or %7C separates multiple values)
- or the streetview query fields :
location same as center above size same as above. fov field of view (default 90°) heading 0 to 360 : 0 north, 90 east, 180 south, 270 west pitch vertical orientation, 0 by default, values from -90° (down) to 90° (up)
Note : at the time of writing this tutorial, no API key was necessary.