Embedding a Google Map

Activity 1:

Objective: Link to a Google Map.

Setup:

Copy the visit-monticello.html file from the start-02 folder to practice folder and replace if necessary.

The activity's completed files are found in the completed folder.

Steps:

  1. Open the visit-monticello.html file in your web browser.

    You will replace this line with HTML elements from Google Maps.

    INSERT GOOGLE MAPS EMBED HTML HERE

  2. Use this link, Thomas Jefferson's Monticello, to open Google Maps and expand the left side panel if it is not already open.

  3. Choose the share icon link in the left side panel, select the Embed map choice.

    What HTML elements appear for embedding a Google Map?

    The iframe element. There are no other HTML elements shown.

    What do the Small, Medium, Large and Custom size choices do to the embed code?

    They change the iframe element's width and height values.

  4. Open the visit-monticello.html file in your code editor.

  5. Copy the embed code from the Google Maps web page.

    Here is the HTML embed code iframe element for your convenience …

    	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3143.650643079607!2d-78.45538808433963!3d38.008608506443835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b3862714c46ceb%3A0xcbef0076cd54df64!2sMonticello!5e0!3m2!1sen!2sus!4v1487783266319" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

     …and replace the bold text in the following line …

    	<p>INSERT GOOGLE MAPS EMBED HTML HERE</p>

     …resulting in the following line …

    	<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3143.650643079607!2d-78.45538808433963!3d38.008608506443835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b3862714c46ceb%3A0xcbef0076cd54df64!2sMonticello!5e0!3m2!1sen!2sus!4v1487783266319" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></p>

  6. Save the visit-monticello.html file and reload in your web browser.

    You will see the Google Map for Thomas Jefferson's Monticello.

    How can users interact with the embedded Google map on your web page?

    • Zoom in, out and drag the map.

    • Save the link.

    • Get directions.

    • Look at reviews.

    • Switch between map and satellite view.

    • Open the map in another web browser window or tab.

Activity 2:

Objective: Create a navigation list of link to the Mountain Portfolio example.

Setup:

Copy the shell.html file from the shell folder to practice folder.

Steps:

  1. Select a place you can visit and created a web page that shows a Google map.

  2. DIY: Create a web page about a place you can visit for one or more videos that you can embed from Youtube.

    You can copy the shell.html file from the shell folder to the practice. Save and open in your web browser. Be sure to validate all the HTML.

    Requirements:

    1. Rename the shell.html file with a few keywords representative of the topic content. Use dashes to separate keywords.

    2. Document title and document description that involve keywords in document content.

    3. Page title describing the topic.

    4. Opening paragraph with a summary of the topic.

    5. Additional items that you wish to add.


    Did you receive similar warning about the Youtube video and the Google map when you validated your HTML document? Hint: You may need to look at message filtering options for the HTML Validator.

    Yes. Both shared the same message under warnings:

    The frameborder attribute on the iframe element is obsolete. Use CSS instead.

    As on 02/21/2017 the Youtube and Google Maps frame element still uses the frameborder element that triggers this warning.

  3. Change the dimensions of the Google map by modifying the embed code. Hint: Use the options on the Google Map page for the video and replace the embed code in your video.

    Can you modify the frame element without using the Google Map page?

    Yes.

Complete and Continue