` element) and add event listeners to handle any
DOM events. Push the `Node` into the maps'
`controls[position]` array to add an instance of the
custom control to your map.
Given a `HomeControl` class implementation that adheres
to the interface requirements noted above (see
[Custom
Controls](https://developers.google.com/maps/documentation/javascript/controls#CustomControls) documentation for details), the following code samples show
how to add a custom control to a map.
```javascript
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
```
```javascript
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
```
## Overlays
Overlays reflect objects that you "add" to the map to designate points,
lines, areas, or collections of objects.
### Add and remove overlays
The types of objects represented
by an Overlay are the same between v2 and v3, however, they are handled
differently.
Overlays in the v2 API were added to and removed from the map using the
`addOverlay()` and `removeOverlay()` methods of
the `GMap2` object. In v3, you assign a map to an Overlay using
the `map` property of the associated overlay options class.
You may also add or remove an overlay directly by calling the
`setMap()` method of the overlay object, and specifying the map you want. Set the map property to `null` to remove the overlay.
No `clearOverlays()` method exists in v3.
If you want to manage a set of overlays, you should create an array to
hold the overlays. Using this array, you can then call
`setMap()` on each overlay in the array (passing
`null` if you need to remove them).
### Draggable Markers
By default, markers are clickable but not draggable. The following
two samples add a draggable marker:
```javascript
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
```
```javascript
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
```
### Icons
You can define a custom icon to show in place of the default marker.
To use a custom image in v2, you can create a `GIcon`
instance from the `G_DEFAULT_ICON type`, and modify it. If
your image is larger or smaller than the default icon, you must
specify it with a `GSize` instance.
The v3 API simplifies this process slightly.
Simply set the marker's `icon`
property to the URL of your custom image, and the API will size the icon
automatically.
The Maps JavaScript API also provides support for complex icons.
A complex icon may include multiple tiles, complex shapes,
or specify the "stack order" of how the images should display relative
to other overlays. To add a shape to a marker in v2, you
need to specify the additional property in each
`GIcon` instance and pass this as an option
to a `GMarker` constructor. In v3, icons
specified in this manner should set their `icon`
properties to an object of type `Icon`.
Marker shadows are not supported in v3.
The following examples display a beach flag at Bondi Beach in
Australia, with the transparent part of the icon not clickable:
```javascript
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
```
```javascript
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
```
### Polylines
A polyline consists of an array of `LatLng`s, plus a series
of line segments that connect those locations in an ordered sequence.
Creating and displaying a `Polyline` object in v3 is similar
to using a `GPolyline` object in v2. The following samples
draw a semi-transparent, 3-pixel wide, geodesic polyline from Zurich to
Sydney through Singapore:
```javascript
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
```
```javascript
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
```
#### Encoded Polylines
No support exists in v3 for creating `Polyline` objects
directly from [encoded
polylines](https://developers.google.com/maps/documentation/javascript/v2/overlays#Encoded_Polylines). Instead, the [The Geometry Library](https://developers.google.com/maps/documentation/javascript/geometry.md.txt)
provides methods to encode and decode polylines. See [Libraries](https://developers.google.com/maps/documentation/javascript/libraries.md.txt) in the v3 Maps
API for more information on how to load this library.
The examples below draw the same encoded polyline; the v3 code uses the
`decodePath()` method from the
`google.maps.geometry.encoding` namespace.
```javascript
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
```
```javascript
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
```
### Polygons
A Polygon defines a region within a closed loop. Much like the
`Polyline` object, `Polygon` objects
consist of a series of points in an ordered sequence. The v3
`Polygon` class is much the same as the v2
`GPolygon` class, with the notable exception
that you no longer have to repeat the starting vertex at the end of the
path to close the loop. The v3 API
will automatically close any polygons by drawing a stroke connecting the
last coordinate back to the first coordinate. The following code snippets
create a polygon representing the Bermuda Triangle:
```javascript
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
```
```javascript
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
```
### User-Editable Shapes
Polylines and polygons can be made user-editable. The following code
snippets are equivalent:
```javascript
map.addOverlay(polyline);
polyline.enableEditing();
```
```javascript
polyline.setMap(map);
polyline.setEditable(true);
```
For more advanced drawing capabilities, see the
[Drawing Library](https://developers.google.com/maps/documentation/javascript/drawinglayer)
in the v3 documentation.
### Info Windows
An `InfoWindow` displays content in a floating window above
the map. There are a few key differences between v2 and v3 info windows:
- The v2 API supports only `GInfoWindow` per map, whereas the v3 API supports multiple, concurrent `InfoWindow`s on each map.
- The v3 `InfoWindow` will remain open when you click the map. The v2 `GInfoWindow` closes automatically when you click the map. You can emulate the v2 behavior by adding a `click` listener on the `Map` object.
- The v3 API does not provide built-in support for a tabbed `InfoWindow`.
### Ground Overlays
To place an image on a map, you should use a
`GroundOverlay` object. The constructor for a
`GroundOverlay` is essentially the same in v2 and v3: it
specifies a URL of an image and the boundaries of the image as
parameters.
The following example places an antique map of Newark, NJ on the map
as an overlay:
```javascript
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
```
```javascript
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
```
## Map Types
The types of maps available in v2 and v3 are slightly different, but all
basic map types are available in both versions of the API. By default, v2
uses standard "painted" road map tiles. However, v3 requires a specific map
type to be given when creating a `google.maps.Map` object.
### Common Map Types
The four basic map types are available in both v2 and v3:
- `MapTypeId.ROADMAP` (replaces `G_NORMAL_MAP`) displays the road map view.
- `MapTypeId.SATELLITE` (replaces `G_SATELLITE_MAP`) display Google Earth satellite images.
- `MapTypeId.HYBRID` (replaces `G_HYBRID_MAP`) displays a mixture of normal and satellite views.
- `MapTypeId.TERRAIN` (replaces `G_PHYSICAL_MAP`) displays a physical map based on terrain information.
Below is an example of v2 and v3 setting the map to terrain view:
```javascript
map.setMapType(G_PHYSICAL_MAP);
```
```javascript
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
```
The Maps JavaScript API v3 made a few changes to the less common map
types as well:
- Map tiles for **celestial bodies** other than Earth are not available as map types in the v3 API, but can be accessed as custom map types. For an example, see this [custome map types example](https://developers.google.com/maps/documentation/javascript/examples/maptype-image.md.txt).
- There is no special map type in v3 that replaces the **`G_SATELLITE_3D_MAP`** type from v2. Instead, you can integrate the Google Earth plugin in your v3 maps using [this
library](http://github.com/googlemaps/js-v3-earth-api).
### Maximum Zoom Imagery
Satellite imagery is not always available at high zoom levels. If you may
want to know the highest zoom level available before setting the zoom level,
use the `google.maps.MaxZoomService` class. This class replaces
the `GMapType.getMaxZoomAtLatLng()` method from v2.
```javascript
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
```
```javascript
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
```
### Aerial Perspective Imagery
When enabling Aerial imagery in v3, controls are similar to the v2
`GLargeZoomControl3D` control, with an additional interstitial
Rotate control to rotate through supported directions.
You can track the cities where 45° imagery is available on
[the supported cities map](http://maps.google.com/maps/ms?ie=UTF8&msa=0&msid=112099477591857711257.00048ad05c320f746f5c2). When 45° imagery is available, a submenu option is added
to the Maps API Satellite button.
## Layers
*Layers* are objects on the map that consist of one or more
overlays. They can be manipulated as a single unit and generally reflect
collections of objects.
### Supported Layers
The v3 API provides access to several different layers. These layers
overlap with v2 `GLayer`
class in the following areas:
- The `KmlLayer` object renders KML and GeoRSS elements into v3 overlays, providing the equivalent for v2 `GeoXml` layer.
- The `TrafficLayer` object renders a layer depicting traffic conditions, similar to the v2 `GTrafficOverlay` overlay.
These layers are different from v2. The differences are described
below. They can be added to a map by calling `setMap()`,
passing it the `Map` object on which to display the
layer.
More information about supported layers is available in the
[Layers documentation](https://developers.google.com/maps/documentation/javascript/layers.md.txt).
### KML and GeoRSS Layers
The Maps JavaScript API supports the KML and GeoRSS data formats for
displaying geographic information. The KML or GeoRSS files must be
publicly accessible if you want to include them in a map. In v3, these
data formats are displayed using an instance of `KmlLayer`,
which replaces the `GGeoXml` object from v2.
The v3 API is more flexible when rendering KML, letting you
suppress InfoWindows and modify the click response. See the v3 [KML and GeoRSS Layers](https://developers.google.com/maps/documentation/javascript/kmllayer) documentation for more detail.
When rendering a `KmlLayer`,
size and complexity restrictions apply; see the
[KmlLayer documentation](https://developers.google.com/maps/documentation/javascript/kmllayer#overview)
for details.
The following samples compare how to load a KML file.
```javascript
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
```
```javascript
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
```
### The Traffic Layer
In v3, you can add real-time traffic information (where supported) to your
maps using the `TrafficLayer` object. Traffic information is
provided for the time that the request is made. These examples show the
traffic information for Los Angeles:
```javascript
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
```
```javascript
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
```
Unlike v2, no options exist for the `TrafficLayer`
constructor in v3. Incidents are not available in v3.
## Services
### Geocoding
The Maps JavaScript API provides a `geocoder` object for
geocoding addresses dynamically from user input. If you want to
geocode static, known addresses, see the
[Geocoding API](https://developers.google.com/maps/documentation/geocoding)
documentation.
The [Geocoding API](https://developers.google.com/maps/documentation/geocoding) has been
significantly upgraded and enhanced, adding new features and changing
how data is represented.
`GClientGeocoder` in the v2 API provided two different methods
for forward and reverse geocoding as well as additional methods to
influence how geocoding was performed. In contrast, the v3
`Geocoder` object provides only a `geocode()`
method, which takes an object literal containing the input terms
(in the form of a [Geocoding
Requests](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests) object) and a callback method. Depending on whether the
request contains a textual `address` attribute or a
`LatLng` object, the Geocoding API will return a forward or
reverse geocoding response. You can influence how the geocoding is
performed by passing additional fields to the geocoding request:
- Including a textual `address` triggers forward geocoding, equivalent to calling the `getLatLng()` method.
- Including a `latLng` object triggers reverse geocoding, equivalent to calling the `getLocations()` method.
- Including the `bounds` attribute enables [Viewport
Biasing](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingViewports), equivalent to calling the `setViewport()` method.
- Including the `region` attribute enables [Region
Code Biasing](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRegionCodes), equivalent to calling the `setBaseCountryCode()` method.
[Geocoding
Responses](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingResponses) in v3 are very different from the v2 responses. The v3 API
replaces the nested structure that v2 uses with a flatter structure that
is easier to parse. Additionally, v3 responses are more detailed: each
result has a several [address
components](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingAddressTypes) that help give a better idea of the *resolution*
of each result.
The following code takes a textual address and shows the first result
from geocoding it:
```javascript
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '
1st result is ' +
// No info about location type
response.Placemark[0].address +
' of ' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
' at ' + latlng + '
';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '
Original address: ' + address + '
';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
```
```javascript
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '
1st result for geocoding is ' +
result[0].geometry.location_type.toLowerCase() +
' to ' +
result[0].formatted_address + ' of types ' +
result[0].types.join(', ').replace(/_/, ' ') +
' at ' + result[0].geometry.location +
'
';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '
Original address: ' + address + '
';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
```
### Directions
The Maps JavaScript API v3 replaces the `GDirections`
class from v2 with the `DirectionsService` class for
calculating directions.
The `route()` method in v3 replaces both the
`load()` and `loadFromWaypoints()` methods from the
v2 API. This method takes a single `DirectionsRequest` object
literal containing the input terms and a callback method to execute upon
receipt of the response. Options may be given in this object literal,
similar to the `GDirectionsOptions` object literal in v2.
In the Maps JavaScript API v3, the task of submitting direction
requests has been separated from the task of rendering requests, which is
now handled with the `DirectionsRenderer` class. You can tie a
`DirectionsRenderer` object to any map or
`DirectionsResult` object through its `setMap()` and
`setDirections()` methods. Because the renderer is an
`MVCObject`, it will detect any changes to its properties and
update the map when the associated directions have changed.
The following code demonstrates how to request walking directions to a
specific location using pedestrian paths from an address. Note that only
v3 is able to provide walking directions in the pedestrian path at
Dublin's Zoo.
```javascript
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
```
```javascript
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
```
### Street View
Google Street View provides interactive, 360° views from
designated locations within its coverage area. The v3 API supports
Street View natively within the browser, unlike v2 which required
the Flash® plugin to display Street View imagery.
Street View images are supported through use of the
`StreetViewPanorama` object in v3, or the
`GStreetviewPanorama` object in v2. These classes have
different interfaces, but they play the same role: connecting the
`div` container with the Street View imagery and letting
you specify the location and POV (point of view) of the Street View
panorama.
```javascript
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
```
```javascript
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
```
Direct access to Street View data is possible through the
`StreetViewService` object in v3 or the similar
`GStreetviewClient` object in v2. Both provide similar
interfaces to retrieve or check availability of Street View data, and
allowing search by location or panorama ID.
In v3, Street View is enabled by default. The map will appear with a
Street View Pegman control and the API will reuse the map div to display
StreetView panoramas. The following code illustrates how to emulate the
v2 behavior by separating the Street View panoramas into a separate div.
```javascript
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
```
```javascript
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}
```