Ember-cli-google-street-view
A simple google street view component for ember-cli aplications. Demo
Installation
Run:
ember install ember-cli-google-street-viewGoogle's javascript library will be automatically referenced inside <head>. To use your API key, specify it in your application configuration in config/environment.js:
var ENV = {
// ...
streetView: {
apiKey: 'API-KEY-HERE',
// or the clientId if using Maps for Work
// https://developers.google.com/maps/documentation/business/clientside/#client_id
clientId: 'CLIENT-ID-HERE'
},
// ...
};If for some reason you want to prevent this addon from adding the script tag (e.g another library already does it), just specify:
var ENV = {
// ...
streetView: {
include: false
},
// ...
};Content Security Policy
Street View uses many resources from Google's servers, so the URLs to them have to be white listed. You can set this by adding to the Content Security Policy defined in config/environment.js like so:
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' *.googleapis.com",
'font-src': "'self' fonts.gstatic.com",
'img-src': "'self' *.googleapis.com maps.gstatic.com *.gstatic.com",
'style-src': "'self' 'unsafe-inline' *.googleapis.com"
},You can find out more information on the CSP addon page here.
Usage
Use the street-view component in your templates:
If you have the coords already in the google maps api form: google.maps.LatLng(lat, lng) you can also pass it directly to the component like so:
Note that you may need to assign a class and style the container element according to your needs. By default the component adds the class street-view-container.
Actions
The component will send the corresponding actions to the street view control events:
-
positionChanged- sent with a{lat, lng}object param when the street view possition changed -
povChanged- sent whenever the Street View's StreetViewPov changes. Note that this event may fire while the position, and pano ID, remain stable (currently receivespanoramaobject as a parameter) -
linksChanged- sent whenever the Street View's links change (currently receivespanoramaobject as a parameter) -
panoChanged- sent whenever the individual pano ID changes (currently receivespanoramaobject as a parameter)
For more information, please refer to Street View Events documentation.
Supported properties
The component supports the following properties:
latlng-
latLng=google.maps.LatLngclass result. zoompovpanControlpanControlOptionszoomControlzoomControlOptionsaddressControladdressControlOptionslinksControlfullscreenControlfullscreenControlOptionsimageDateControl
You can also pass in a map property with an existing Google maps instance. This component will create a Street View panorama bound to that existing map instance, with the same position.
For more information, please refer to Street View Developer docs documentation.
Contributions
Make all Pull Requests to the dev branch.