How to embed google map in html

Sometimes it is required to embed a google map in our application to inform people about exact location of some place. Using the following steps, we can embed a google map in our application.

Step 1: Open maps.google.com

Step 2: Zoom in to the location that you want to embed, right click. A context menu will appear. Click on the option “What’ s Here” on the context menu. On the bottom of the page, you will see the link of GPS coordinates of the location

Step 3: Click on GPS coordinates, this will display a balloon on the map for the selected location.

Step 4: On the options panel appearing on the left, click on icon Share.  A dialog box will appear, with two tabs on the top. Click on the tab titled: Embed Map. A text will appear in the text box. There will also be option to select size. You can select the desired size, and copy text from the text box.

Step 5: Paste the copied text in your application within <body></body> tags, as shown below:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3300.966350528846!2d73.25855831483896!3d34.17277798057333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzTCsDEwJzIyLjAiTiA3M8KwMTUnMzguNyJF!5e0!3m2!1sen!2s!4v1490161855884" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

Add a Comment

Your email address will not be published. Required fields are marked *