How to Embed Google Maps to your Website

Submitted by: 
Language: 
Visitors have accessed this post 353 times.

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="<a href="https://maps.google.com/maps?q=bacolod%20city%20plaza&t=&z=17&ie=UTF8&iwloc=&output=embed"" rel="nofollow">https://maps.google.com/maps?q=bacolod%20city%20plaza&t=&z=17&ie=UTF8&iw...</a> frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="<a href="https://www.crocothemes.net">crocothemes.net</a></div><style>.mapouter" rel="nofollow">https://www.crocothemes.net">crocothemes.net</a></div><style>.mapouter</a>{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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.