| Excerpt | ||||
|---|---|---|---|---|
| ||||
How to embed XP360 alongside your Google-powered map. |
XP360 is an easy to implement JavaScript API. Below is an embedded demo that shows how to harness the power of our JavaScript API from an embedded Google Map.
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
What does the code setup look like?
Let’s take a look and break down some of the code up above in the JSFiddle
Setting up the map:
Most likely you already have a Google map setup and utilizing data. But if not, let’s build a basic map to see how we can setup this interaction.
We are centered on Arizona State University in Tempe in our example, but you can be wherever your data is!
Adding markers to the Google Map:
Let’s go ahead and add markers to the map. We have a list of marker data, but the data can come from anywhere: a CSV file, REST API, hard coded, whatever your need!
Setting up the AerialSphere Viewer:
Now let’s setup the AerialSphere viewer. This can occur whenever you want to trigger it. Some examples:
When the window first loads
When you first make a call to the viewer you can check to see if it has been activated yet, and then activate it if not
Since we are near Tempe, Arizona, and know its lat/lng position, let’s load our AerialSphere Viewer there too.
Harnessing the Viewer:
In this final step, we tell the viewer to do three things:
load the nearest experience
look at the marker position that was clicked
load an marker icon from the XP360 marker library at that position
index.html
| Code Block |
|---|
<head> <script src="https://maps.googleapis.com/maps/api/js?key="YOUR KEY GOES HERE"&callback=initGoogleMap&v=weekly" defer></script> </head> |
JavaScript
| Code Block |
|---|
const initGoogleMap = () => {
map = new google.maps.Map(document.getElementById('google-map'), {
center: {
lat: 33.424103089479054,
lng: -111.92816298097769
},
zoom: 16,
});
} |
JavaScript
| Code Block |
|---|
// Adding google markers based on a list of data
// You need at a minimum a { lat: number, lng: number } object so you can set its position.
markerInformation.forEach((marker) => {
const latLng = { lat: marker.lat, lng: marker.lng }
google_marker = new google.maps.Marker({
position: latLng,
map,
title: marker.name,
});
})
// The above should be added into the initGoogleMap function below the map initiation. |
JavaScript
| Code Block |
|---|
const initAerialSphere = () => {
sphereData = {
sphereLat: 33.424103089479054,
sphereLng: -111.92816298097769,
lookAtLat: 33.424103089479054,
lookAtLng: -111.92816298097769
}
// this will setup the viewer and load it into ASU.
viewer = new AerialSphere(
'aerialSphereDivId',
'aerialSphereIframeClassname',
sphereData
)
} |
JavaScript
| Code Block | ||
|---|---|---|
| ||
// above is the code that created the google marker
google_marker.addListener("click", () => {
addViewerMarker(marker)
});
const addViewerMarker = (marker) => {
// Because we are both loading and looking at the markers,
// we are using sendData to accomplish both.
viewer.sendData({
lookAtLat: marker.lat,
lookAtLng: marker.lng,
sphereLat: marker.lat,
sphereLng: marker.lng,
layers: [{
name: 'markers',
visible: true,
markers: [{
name: marker.name,
description: marker.description,
lat: marker.lat,
lng: marker.lng,
icon: marker.icon
}]
}]
})
} |