Warning: Invalid argument supplied for foreach() in /home/techrecipes/public_html/wp-content/themes/techrecipes/header.php on line 77

Easy Way to Embed and Customize Google Map without Using the API

Google has finally made embedding a google map as easy as embedding a YouTube video. By following these steps you are just a copy and paste away from placing a google map into your web site or blog. This article has been updated for the latest directions.

One of the keys to YouTube’s popularity has been the ease of embedding Youtube videos to blogs. Now, placing a Google map into your blog is just as easy. I’ll be using a map of Appalachian State University’s campus in this example.

Embedding A Google Map Instead Of Linking To It

1. Go to the map that you want to embed (my example).

Google Map

2. If the right-hand panel isn’t visible, click the small arrow in the upper left of the map to expand the panel.

Expand Panel

3. Click the Link icon in the panel. This will reveal the map embed code.

Link Icon

4. You can copy and paste the code inside the Paste HTML to embed in website textbox, or if you’re inclined, click the Customize and preview embedded map to make customizations to the embedded map code.

Copy Code or Customize

5. On the Customize page, you can modify the size of the map and even make it a custom size. There’s also a live preview of the changes on the map. Once you’ve customized the map to your liking, copy and paste the code from the Copy and paste this HTML to embed in your website textarea.

Customize Google Map

Below is an embedded example using the steps above. Feel free to click and roam around the map. You will be able to drag and zoom just as if you were on the actual Google Maps site.


View Larger Map

Editor note: This article was originally posted several years ago. This update adds better directions and more detailed pictures.

 

About Aaron St. Clair

Aaron St. Clair is a tech guru studying Computer Science at Appalachian State University in Boone, North Carolina. When he's not tinkering with new gadgets, modding systems, or slaving away at the mercy of the Tech-Recipe overlords, you can find him exploring the high country.
View more articles by Aaron St. Clair

The Conversation

Follow the reactions below and share your own thoughts.

  • one

    testing

  • Nat

    Hi, yes this was very easy. Doi you know if there’s a difference qith using the API? What benefits does it have? Do you know?
    Thx.

    • rbald

      Hi, same question as Nat.
      Would like to know the difference and/or advantages of using the API instead of embedding google map?

      Thank you.

    • Anonymous

      The API allows you to make your own points of interest, and manipulate the “bubbles” at least. There are a number of other options within the API that I’m just learning about. It’s really pretty cool. It’s free to download and as long as you are allowing free public access to your site. I don’t know a lot more since I’m just starting out, but it seems pretty nice.

  • Conor B

    Thanks for this – it’s so easy and yet Google has no information on how to use it! Good job!

  • Krithika Eshwar

    can someone plz suggest how to popup a bubble white message box if you click on a map… in javascript.. asp.net… please help…