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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Google map iframe problem

Status
Not open for further replies.
Skippie1

Skippie1

Technical User
May 7, 2012
29
ZA
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?
 
Sort by date Sort by votes
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)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
998
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
124
SitesMasstec
SitesMasstec
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
477
PeDa
PeDa
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
157
caykamanj1966
caykamanj1966
lupidol
  • Locked
  • Question
CSS fonts from Google Font 3
Replies
5
Views
210
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top