Category Archives: 3. Adv Web Design (T3 15-16)

Notes on Google Maps API — create map, set to location, add pins

Maps with Javascript

Google Maps API is at:

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

 

  1. Get the key from Google – you are looking for the Javascript API key.
    1. Do not enable billing unless you want to go bankrupt
  2. HTML
    1. Need a div that will be the container for the map
      1. <div id=”mapContainer”>
    2. Your Javascript
      1. Function that will initialize the map after the Google API has loaded

Notice that the map variable is global. That way you can access and change the map object from other functions and in response to user input or geolocation inputs

var map;

function initMap(){

   map = new google.maps.Map(document.getElementById(“mapContainer`”),{

       center: {lat: 44.461458, lng: -110.830992},

       zoom: 14

   });

  

  

}

  1. Script to load the Google Maps API
    1. Goes at the bottom of the body in your html so that it will load only after your other HTML has loaded.
    2. There are ways to do this in an onload function that involve creating a script element and adding it to the body.
    3. <script src=”https://maps.googleapis.com/maps/api/js?key=YourKeyc&callback=initMap”

   async defer></script>

     

Notice that the callback function is the same as the function Name in step 3. Yours don’t have to be named the same as mine, but they do need to match between the Google API script tag and your own function

 

Getting the actual position of the person using this page

Check and see if geolocation is available:

If it is, then run the getCurrentPosition method

      That takes an argument that is looking for the function to run once it has received the current position.

      if(navigator.geolocation){

                  navigator.geolocation.getCurrentPosition(setMap);

}

else{

alert(“Geolocation is disabled”);

}

 

Then, in the setMap function, you can use the map.panTo method to move the map to the specificed position. Note: the panTo method will do a smooth animation if the new location is in the bounds of the displayed map. Otherwise, it will jump to that location.

 

The position object that will be sent my navigator.geolocation.getCurrentPosition has two things that really matter to you for this:

Position.coords.longitude

Position.coords.latitude

 

So setMap might look like this:

 

function setMap(position){

  

   map.panTo({lat: position.coords.latitude, lng: position.coords.longitude});

   map.setZoom(18);

  

}

 

MARKERS // MAP PINS

To add a marker to a map, you create a new google.maps.Marker object. It needs at least these properties:

position (a latlng object – google maps style)

map (the map variable you used when you created your original map – remember, this should be a global variable)

 

OPTIONAL:

animation

title – what the pin will say when you hover over it.

 

For this example, we’re going to add a click listener to the map which will add a marker wherever the user clicks on the map. It will say “Hello World” and it will enter with a Drop animation effect.

 

map.addListener(‘click’, function(e){

       var marker = new google.maps.Marker({

           position: e.latLng,

           map: map,

           animation: google.maps.Animation.DROP,

           title: ‘Hello World’

       });

   });

Javascript Knowledge So far

Here are the things we know so far. Things IN BLUE we have agreed to review. Items IN GREEN we have reviewed.

  • creating variables
  • declaring functions
  • Document Object Model (DOM)
  • Getting elements from a page
  • Working with classes (change/add/remove)
  • Working with attributes
  • Changing styles
  • dataset
  • Creating elements (Click for explanatory post)
  • Adding attributes to new elements
  • Adding classes to new elements
  • Adding ID to new element
  • Adding new elements to existing elements (appendchild)
  • For Loops
  • For…in Loops
  • if then statements
  • Connecting up events
  • Objects
    • Creating
    • Creating with constructors
    • Creating methods within
  • Drag/Drop (Click here for an explanatory post)
  • Arrays
  • JSON
  • Local Storage

Group Maker Application

Today I want you to begin to make a ‘Group Maker’ application.

The page should have a section for students that don’t belong to a group. Then it should start with a couple of boxes representing groups. There should be a button to add a group, and it should be possible to remove a group as well.

The user should be able to enter a name into a text field and click a button to add a student to the ‘ungrouped’ section.

The user should also be able to drag that student to one of the groups to assign it there.

Think about how you want to handle it if the user deletes a group that has people in it.

 

Box Manipulator

The box manipulator web page should have a button that will add a box to the screen each time it’s clicked.

 

When a user clicks on one of the boxes it added, it should select that box, and somehow indicate that it’s selected (new border, or something).

 

Below the container there should be buttons to change the selected box – Either increase or decrease size, or change to one of a few colors.