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.

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:
1. When the window first loads
2. 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:
1. load the nearest experience
2. look at the marker position that was clicked
3. load an marker icon from the XP360 marker library at that position

index.html

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key="YOUR KEY GOES HERE"&callback=initGoogleMap&v=weekly" defer></script>
</head>

JavaScript

const initGoogleMap = () => {
  map = new google.maps.Map(document.getElementById('google-map'), {
    center: {
      lat: 33.424103089479054,
      lng: -111.92816298097769
    },
    zoom: 16,
  });
  
}

JavaScript

// 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

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

// 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
      }]
    }]
  })
}

Public Documentation V.2

XP360 Integration with Google Maps

What does the code setup look like?