No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

#A Geography Game - That will give you the skills


This is a geography game where you are asked a question and then you have to locate the answer (in the form of a marker) on the map. The catch is that the marker does not appear until you zoom into a specific level of the map. Once you locate the marker you can click on it. An info window will appear letting you know the name of the location you have found. You can then click the button within the info window to progress through the game.

##Technology Used:

  • HTML5
  • CSS3
  • JavaScript
  • React.js
  • Node.js
  • NPM packages for React-Google-Maps, React-Router, React-Bootstrap
  • Google Maps API


  1. Using the Google Maps API with the NPM Package "React-Google-Maps" to successfully get a map rendered onto the screen.
  2. Manipulating the Google Maps API to accomplish things like:
    1. Changing visibility of markers based on zoom level.
    2. Targeting markers with JavaScript that only appear based on current render().
  3. Resetting the map zoom after an event.
  4. Using info windows to perform actions on the map.
  5. Using React-Router to make our NavBar a have single page links.
  6. Styling the map while using React and React-Google-Maps.


##Future Installments:

  • Points based system
  • Expand to other regions (Asia, Europe, etc.)
  • Add additional clues to the game

##Code Examples

Snippet of some map zoom logic.

  handleZoomChange() {
      const zoomLevel = this._mapComponent.getZoom();
      if (zoomLevel >= {
              visibility: true,
      } else {
              visibility: false

Setting State.

constructor(props) {
        this.state = {
            data: {},
            visibility: false,
            showInfo: false
    this.handleMapLoad = this.handleMapLoad.bind(this);
    this.handleMarkerClick = this.handleMarkerClick.bind(this);
    this.handleZoomChange = this.handleZoomChange.bind(this);
    this.handldeInfoBtnClick = this.handldeInfoBtnClick.bind(this);


An example of an Object in our Data Array.

    greeting: "Welcome to the Map Game. Your first clue is:",
    question: "This cape in Washington is the westernmost point in the lower 48 states.",
    answer: "Cape Alava, WA",
    mapOptions: {
        center: {lat: 39.8282, lng: -98.5795},
        zoom: 4,
        mapTypeId: 'terrain',
        styles: mapStyle
    markerOptions: {
        position: {lat: 48.1647572, lng: -124.7331501},
        title: "Cape Alava, WA",
    revealMarkerZoom: 9,
    visible: false,


Homescreen when you first start out alt text

Info window when marker is found alt text