Skip to content

Instantly share code, notes, and snippets.

@DylanCodeCabin

DylanCodeCabin/wp-go-maps-guessr-prototype.js

Last active January 28, 2026 10:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DylanCodeCabin/83eb74c99cdb3e139d7ad166d8d79467 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DylanCodeCabin/83eb74c99cdb3e139d7ad166d8d79467 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wp-go-maps-guessr-prototype.js
/* Guess the location game demo */
jQuery(($) => {
/* Limit our map logic to a specific map ID */
const targetMapId = 121;
let game = false;
$(document.body).on('init.wpgmza', (event) => {
if(event && event.target && event.target instanceof WPGMZA.Map && event.target.id && parseInt(event.target.id) === targetMapId){
/* Our target map has loaded, and we can load our game */
game = new WPGoMapsGuesser(event.target);
}
});
class WPGoMapsGuesser {
constructor(map){
this.map = map; // Link the map
this.prepare(); // Prepare the game
this.ui(); // Build our user interface
this.newGame(); // Start a new game
}
prepare(){
/* Define a list of known locations */
/* Why? We cannot pick random coordinates as they may not have a valid street view location */
this.locations = [
{ name: "Times Square", coordinates: { lat: 40.7580, lng: -73.9855 } },
{ name: "The White House", coordinates: { lat: 38.8977, lng: -77.0365 } },
{ name: "Golden Gate Bridge", coordinates: { lat: 37.8324, lng: -122.4795 } },
{ name: "Las Vegas Strip", coordinates: { lat: 36.1126, lng: -115.1739 } },
{ name: "Hollywood Sign View", coordinates: { lat: 34.1266, lng: -118.3265 } },
{ name: "Millennium Park", coordinates: { lat: 41.8827, lng: -87.6233 } },
{ name: "Space Needle", coordinates: { lat: 47.6205, lng: -122.3493 } },
{ name: "The Alamo", coordinates: { lat: 29.4260, lng: -98.4861 } },
{ name: "French Quarter", coordinates: { lat: 29.9584, lng: -90.0651 } },
{ name: "South Beach Ocean Dr", coordinates: { lat: 25.7797, lng: -80.1300 } },
{ name: "Independence Hall", coordinates: { lat: 39.9489, lng: -75.1500 } },
{ name: "Grand Canyon South Rim", coordinates: { lat: 36.0575, lng: -112.1430 } },
{ name: "Yosemite El Capitan", coordinates: { lat: 37.7325, lng: -119.6347 } },
{ name: "Big Sur Coast", coordinates: { lat: 36.3190, lng: -121.8890 } },
{ name: "Going-to-the-Sun Road", coordinates: { lat: 48.6961, lng: -113.7170 } },
{ name: "Blue Ridge Parkway", coordinates: { lat: 35.5312, lng: -82.4635 } },
{ name: "Zion Canyon Blvd", coordinates: { lat: 37.2001, lng: -112.9870 } },
{ name: "Monument Valley", coordinates: { lat: 36.9980, lng: -110.1015 } },
{ name: "Arches Park Entry", coordinates: { lat: 38.6165, lng: -109.6198 } },
{ name: "Mount Rushmore View", coordinates: { lat: 43.8770, lng: -103.4560 } },
{ name: "Seven Mile Bridge", coordinates: { lat: 24.7001, lng: -81.1601 } },
{ name: "The Airplane Boneyard", coordinates: { lat: 32.1499, lng: -110.8358 } },
{ name: "Cadillac Ranch", coordinates: { lat: 35.1872, lng: -101.9870 } },
{ name: "Salvation Mountain", coordinates: { lat: 33.2538, lng: -115.4731 } },
{ name: "Carhenge", coordinates: { lat: 41.1422, lng: -102.8580 } },
{ name: "The Phallic Church", coordinates: { lat: 41.8420, lng: -89.4859 } },
{ name: "Winchester Mystery House", coordinates: { lat: 37.3184, lng: -121.9510 } },
{ name: "Luecke Farm", coordinates: { lat: 30.0800, lng: -97.1400 } },
{ name: "Field of Dreams Site", coordinates: { lat: 42.4977, lng: -91.2059 } },
{ name: "World’s Largest Basket", coordinates: { lat: 40.0635, lng: -82.3450 } },
{ name: "Lucy the Elephant", coordinates: { lat: 39.3330, lng: -74.4530 } },
{ name: "Historic Deadwood", coordinates: { lat: 44.3764, lng: -103.7298 } },
{ name: "Savannah Forsyth Park", coordinates: { lat: 32.0673, lng: -81.0963 } },
{ name: "Taos Pueblo", coordinates: { lat: 36.4390, lng: -105.5450 } },
{ name: "Salem Witch Memorial", coordinates: { lat: 42.5190, lng: -70.8910 } },
{ name: "Santa Monica Pier", coordinates: { lat: 34.0100, lng: -118.4960 } },
{ name: "Mackinac Island", coordinates: { lat: 45.8510, lng: -84.6260 } },
{ name: "Oak Bluffs Cottages", coordinates: { lat: 41.4550, lng: -70.5560 } },
{ name: "Biltmore Estate View", coordinates: { lat: 35.5406, lng: -82.5520 } },
{ name: "Sedona Red Rocks", coordinates: { lat: 34.8055, lng: -111.7665 } },
{ name: "Historic Route 66", coordinates: { lat: 35.2490, lng: -114.0530 } }
];
this.map.on('click', (event) => {
this.markGuess(event);
});
}
ui(){
/* Create the elements */
$(this.map.element).append(`
<div class='wpgmza-guessr-map-view-btn'>Map</div>
<div class='wpgmza-guessr-street-view-btn'>Street View</div>
<div class='wpgmza-guessr-continue-btn'>Continue</div>
<div class='wpgmza-guessr-guess-btn'>Make Guess</div>
<div class='wpgmza-guessr-result'></div>
`);
/* Link the buttons to our game */
$(this.map.element).find('.wpgmza-guessr-map-view-btn').on('click', () => {
this.showMap();
});
$(this.map.element).find('.wpgmza-guessr-street-view-btn').on('click', () => {
this.showStreetView();
});
$(this.map.element).find('.wpgmza-guessr-continue-btn').on('click', () => {
this.next();
});
$(this.map.element).find('.wpgmza-guessr-guess-btn').on('click', () => {
this.guess();
});
$(this.map.element).find('.wpgmza-guessr-result').on('click', '.wpgmza-guessr-new-game', () => {
this.newGame();
});
}
newGame(){
this.pool = [...this.locations].sort(() => Math.random() - 0.5).slice(0, 10); // Pick 10 random locations for this game
this.next();
}
next(){
if(this.pool.length){
this.clear();
/* Pick the next location */
this.question = this.pool.shift();
/* Set up street view and load it */
let streetViewOptions = {
lat : this.question.coordinates.lat,
lng : this.question.coordinates.lng,
bearing: 0,
pitch: 10
}
this.map.setStreetView(streetViewOptions);
/* Hide the address control */
this.map.panorama.setOptions({
addressControl: false
});
this.showStreetView();
} else {
/* The game has ended */
$(this.map.element).find('.wpgmza-guessr-result').show();
$(this.map.element).find('.wpgmza-guessr-result').html(`End of game <div class='wpgmza-guessr-new-game'>New Game</div>`);
}
}
showMap(){
this.map.panorama.setVisible(false);
$(this.map.element).find('.wpgmza-guessr-map-view-btn').hide();
$(this.map.element).find('.wpgmza-guessr-street-view-btn').show();
$(this.map.element).find('.wpgmza-guessr-guess-btn').show();
$(this.map.element).find('.wpgmza-guessr-continue-btn').hide();
$(this.map.element).find('.wpgmza-guessr-result').hide();
}
showStreetView(){
this.map.panorama.setVisible(true);
$(this.map.element).find('.wpgmza-guessr-map-view-btn').show();
$(this.map.element).find('.wpgmza-guessr-street-view-btn').hide();
$(this.map.element).find('.wpgmza-guessr-guess-btn').hide();
$(this.map.element).find('.wpgmza-guessr-continue-btn').hide();
$(this.map.element).find('.wpgmza-guessr-result').hide();
}
clear(){
if(this.guessMarker){
this.map.removeMarker(this.guessMarker);
this.guessMarker = false;
}
if(this.answerMarker){
this.map.removeMarker(this.answerMarker);
this.answerMarker = false;
}
if(this.distanceLine){
this.map.removePolyline(this.distanceLine);
this.distanceLine = false;
}
}
guess(){
if(this.guessMarker && this.question){
this.markAnswer(this.question);
this.markDistance();
this.map.fitBoundsToMarkers();
$(this.map.element).find('.wpgmza-guessr-map-view-btn').hide();
$(this.map.element).find('.wpgmza-guessr-street-view-btn').hide();
$(this.map.element).find('.wpgmza-guessr-guess-btn').hide();
$(this.map.element).find('.wpgmza-guessr-continue-btn').show();
let distance = WPGMZA.Distance.between(this.guessMarker.getPosition(), this.answerMarker.getPosition());
distance = parseInt(distance);
$(this.map.element).find('.wpgmza-guessr-result').show();
$(this.map.element).find('.wpgmza-guessr-result').text(`You were ${distance}km away`);
}
}
markGuess(event){
if(this.answerMarker){
return;
}
this.guessMarker = WPGMZA.Marker.createInstance({
title : "Your Guess",
address: `${event.latLng.lat}, ${event.latLng.lng}`,
map_id: this.map.id,
lat: event.latLng.lat,
lng: event.latLng.lng,
});
this.map.addMarker(this.guessMarker);
}
markAnswer(location){
this.answerMarker = WPGMZA.Marker.createInstance({
title : location.name,
address: `${location.coordinates.lat}, ${location.coordinates.lng}`,
map_id: this.map.id,
lat: location.coordinates.lat,
lng: location.coordinates.lng,
});
this.map.addMarker(this.answerMarker);
}
markDistance(){
this.distanceLine = WPGMZA.Polyline.createInstance({
polydata : [
{ lat : this.guessMarker.lat, lng : this.guessMarker.lng },
{ lat : this.answerMarker.lat, lng : this.answerMarker.lng }
],
strokeWeight: 2,
strokeColor : "#000000",
strokeOpacity : 0.7
});
this.map.addPolyline(this.distanceLine);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment