Google map iframe problem

Skippie1 · Nov 5, 2013

Good day,

I am doing a website where I have several restaurants and when you click on the restaurant you are looking for it opens a Google map in an iframe inside the same webpage. This is working OK but I would like to add the contact details of the particular restaurant next to the iframe. Somebody that can perhaps help me?

datamasher · Nov 10, 2013

Hi,
one way of doing this is to follow the steps below :-

1. Put an iframe in the website page where you want to display the map and contact details using the following code :-

HTML:

[COLOR=#204A87]<iframe src="restaurantlinks.htm" width="750" height="500" frameborder="10" name="iframe0"></iframe>[/color]

2. Create an html page containing restaurant links using the following code:-

HTML:

<!DOCTYPE html>
<html>
<body>

<div style="float: left; margin: 10px;" width="750" height="500">

<h2>Select a Restaurant from the links below<br><br>A Google Map showing the Restaurant Location and Contact details will be displayed here</h2>

<a href="restaurant1.htm">Restaurant 1</a> | <a href="restaurant2.htm">Restaurant 2</a> | <a href="restaurant3.htm">Restaurant 3</a> | <a href="restaurant4.htm">Restaurant 4</a>


</body>
</html>

and save it in the same place as your main website page as "restaurantlinks.htm" . When you open your main website page, this links page will appear in the iframe

3. Create identical pages for each restaurant using the following code :-

HTML:

<!DOCTYPE html>
<html>
<body>

<div style="float: left; margin: 10px;">
<h2>The Prince Alfred <a href="javascript: history.go(-1)">Go Back to List</a></h2>

<div style="margin: 10px; width: 770px; height: 500px;">



<iframe [COLOR=#CC0000]style="float: left;"[/color] width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="[URL unfurl="true"]https://maps.google.co.uk/maps?[/URL]

f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=restaurants+in+London&amp;aq=1&amp;oq=restaurants+in+london+west+end&amp;sll=51.511283,-

0.128314&amp;sspn=0.031997,0.103083&amp;ie=UTF8&amp;hq=restaurants&amp;hnear=London,+United+Kingdom&amp;t=m&amp;fll=51.532535,-

0.185051&amp;fspn=0.015991,0.051541&amp;st=115968771510351694523&amp;rq=1&amp;ev=zi&amp;split=1&amp;ll=51.524642,-

0.184752&amp;spn=0.031984,0.103083&amp;z=14&amp;iwloc=A&amp;cid=17290207397040793508&amp;output=embed"></iframe><br /><small><a href="[URL unfurl="true"]https://maps.google.co.uk/maps?[/URL]

f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=restaurants+in+London&amp;aq=1&amp;oq=restaurants+in+london+west+end&amp;sll=51.511283,-

0.128314&amp;sspn=0.031997,0.103083&amp;ie=UTF8&amp;hq=restaurants&amp;hnear=London,+United+Kingdom&amp;t=m&amp;fll=51.532535,-

0.185051&amp;fspn=0.015991,0.051541&amp;st=115968771510351694523&amp;rq=1&amp;ev=zi&amp;split=1&amp;ll=51.524642,-

0.184752&amp;spn=0.031984,0.103083&amp;z=14&amp;iwloc=A&amp;cid=17290207397040793508" style="color:#0000FF;text-align:left"></a></small>


<div style="float: left; margin: 10px; padding: 10px; border: 2px solid black; height: 345px; width: 150px;">
<p>
The Prince Alfred
</p>
<p>
Contact details :<br><br>
TEL: 
<br><br> 
Website : 
<br><br>
Email : 
</p>
</div>

</div>

</body>
</html>

Save this code as "restaurant1.htm". Note that css float style has been added to the example Google Map Embed iframe link !! This is the bit shown in red in the code. Also fill in the relavant details for restaurant ie the name in the H2 header and contact details for that restaurant.

I've put in the details for the "Prince Alfred" restaurant in London in the above code as a demo for you.

4. Copy and paste the code for each restaurant and save the pages in the same place as your main website page as "restaurant2.htm" , "restaurant3.htm" etc changing the Google link and Restaurant details each time

Hope this is clear and is a help

Steve (Datamasher)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Google map iframe problem

Skippie1

Technical User

datamasher

Technical User

Similar threads

Part and Inventory Search

Sponsor