Adding Your Location

At the moment, we have a blank map of our current location. Let's add a marker to display where we are.

Marker

In the googlemaps.js file, add the following code inside the if statement underneath the map variable:

var marker = new google.maps.Marker({
    position: latlng,
    map: map
});

This marker object takes the latlng and map variables that were previously defined and adds them as properties. This will tell the program what map the marker needs to be placed on, as well as the coordinates for it to be placed. Check out more information on marker in Google's API Docs.

Save your changes and refresh your browser, and the marker should appear. This the standard marker for GoogleMaps as you're used to seeing it! If we want to, we can customize our marker.

Custom Marker

Let's use a fun custom marker! Google image search anything you'd like to use as a marker. Smaller images will work better! In googlemaps.js, add the following line of code right above the marker object declaration. You can set iconBase equal to the image address of an image from Google. Make sure you do Copy Image Address when you right click on a google image to grab it. Replace your-img-url-here with the address of the image you want.

//Step 2. Add Custom Icon
var iconBase = 'your-img-url-here';

Also change the var marker code to

var marker = new google.maps.Marker({
      position: latlng,
      icon: iconBase,
      map: map
    });

You should now see your custom marker on the map at your current location!

If you've successfully changed the marker icon, commit your code and move on to the next module.