Calling Google Maps with Javascript and CSS

Max Brockman's Code Fellows UX Dev Journey

At Code Fellows, we've learned to use javascript to call on google all powerful map services. The google API is a deep deep hole that we can go down, and I'm just scratching the surface with this. You'll also notice hopefully, when you get this working, that I've made this responsive to screen size. On your browser get in the habit of grabbing the screen edge with your mouse and drag it back and forth to see if elements are adjusting size.

First we're going to add an article to our HTML5 index file. Like so.

<article class="map">
     <p>Searching the Internet to find you: <span id="geostatus">checking...</span></p>
</article>

Then, We're going to make a .js file and using <script></script> we're going to call the JS I've posted below for you!

// Primary function for the Geo location app
function success(position) {
  // create a simple variable for the ID
  var s = document.querySelector('#geostatus');

  if (s.className == 'success') {
    return;
  }

  // Replaces text with new message
  s.innerHTML = "Found you!";
  // Adds new class to the ID status block
  s.className = 'success';

  // creates map wrapper for responsiveness
  var mapwrapper = document.createElement('div');
  mapwrapper.className = 'mapwrapper';

  // creates the block element at sets the width and height
  var mapcanvas = document.createElement('div');
  // Adds ID to the new div
  mapcanvas.id = 'mapcanvas';

 // Adds the new block element as the last thing within the article block
  document.querySelector('.map').appendChild(mapwrapper);

 // Adds the new block element as the last thing within the mapwrapper block
  document.querySelector('.mapwrapper').appendChild(mapcanvas);


  // creates a new variable 'latlng' off of the google maps object
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  // create new variable that contains options in key:value pairs
  var myOptions = {
    zoom: 15,
    center: latlng,
    // ROADMAP is set by default, other options are HYBRID, SATELLITE and TERRAIN
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // creates the new 'map' variable using the google object
  // then using the 'mapcanvas' ID appending the options
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  // creates new 'marker' variable
  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
  });
}

// Function that displays the error message
function error(msg) {

  // sets simple variable to the status ID
  var s = document.querySelector('#geostatus');
  // designates typ eof message and passes in value
  s.innerHTML = typeof msg == 'string' ? msg : "Sorry, but I can't locate you?";
  s.className = 'fail';
}


// statement that tests for device functionality
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

A series of things are happening in this example. First you create a variable called mapwrapper.

// creates map wrapper for responsiveness
  var mapwrapper = document.createElement('div');
  mapwrapper.className = 'mapwrapper';

With that var we, on the 'document' create a 'div' called mapwrapper. We also subsequently create a css class called mapwrapper so that we can use the stylesheet to adjust the layout and look of the div.

.mapwrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

#mapcanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Next, we do the exact same thing that we did with mapwrapper, but this time we're creating a div called mapcanvas.

// creates the block element at sets the width and height
      var mapcanvas = document.createElement('div');
      // Adds ID to the new div
      mapcanvas.id = 'mapcanvas';

Now map canvas is the actual functioning map that calls the Google code and generates the map. Map wrapper is a container that we plan to put around mapcanvas in order to make it responsive to our CSS! So far so good? Good. Next we call, in the 'document', and query to find a selector called 'map'. This is the first time we're actually assigning anything to an existing html element. If you inspect element you'll see the article with a class of 'map'. So what happens with appendChild is that we are inserting the div of mapwrapper we created into the last child spot of the article. We run this again but instead insert the id mapcanvas inside the mapwrapper class. OMG it's so simple!