Skip to main content

How to Embed Google Maps to your Website


Embedding a Google Maps onto a website may look difficult to achieve well, I’m going to teach you the simplest way on how to do it and even a beginner can easily do it. In this tutorial you will learn how to embed Google maps onto your website. This is ideal if you have an online business with a website, in this way it will be easier for your customers to locate you. All you have to do is follow the instruction below.

Creating HTML

  1. <html>
  2. <title>Embed Google Map</title>
  3. <header>
  4. <h1>Embed Google Map</h1>
  5. </header>
  6. <body>
  7. </body>
  8. </html>

Embedding Google Map

Step 1

Go to https://www.embedgooglemap.net/.
g1

Step 2

Search the target place you want to display.
g2

Step 3

Click “Get HTML Code” button.
g3

Step 4

Copy the code and paste it in the index page that you have created.
g4

Full Source code

  1. <html>
  2. <title>Embed Google Map</title>
  3. <header>
  4. <h1>Embed Google Map</h1>
  5. </header>
  6. <body>
  7. <div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=bacolod%20city%20plaza&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.crocothemes.net">crocothemes.net</a></div><style>.mapouter{text-align:right;height:500px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:600px;}</style></div>
  8. </body>
  9. </html>

For any questions about this article. You can contact me @
Email – [email protected]
Mobile No. – 09305235027 – TNT
Or feel free to comment below.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.