Google Maps popup box help

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

19-Oct-09 06:38
Hello,

I'm creating a contact page and I have several locations for my businesses. All my locations (addresses) are displayed on a page and I want to create a "view map" link for each address. I know I'm able to embed a Google Map on a webpage, but instead of this, is it possible when somebody clicks on this link, a pop-up box displays the location in Google Maps? I don't want this pop-up to be a new browser window, rather I would like it to be just a pop-up layer using <div> tags. Is this possible?

Hope you can help me out or steer me in the right direction!
Thanks!
19-Oct-09 07:16
[Topic moved to "Authoring and Programming"]

Hi webmonkey8, welcome to the forums!

How about this? (You'll want to style the "Close Map" text of course!)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style type="text/css">
#maps div { display: none; position: absolute; border: 5px solid gray; padding: 5px; margin-top: 10px; }
#maps div.shown { display: block; }
</style>

<script type="text/javascript">

function showMap(link) {
var linkClass = link.className;
var maps = document.getElementById('maps').getElementsByTagName('div');

// Show selected map and hide other maps

for ( i in maps ) {
if ( typeof(maps[i].className) == 'undefined' ) continue;

if ( maps[i].className.indexOf(linkClass) == 0 ) {
maps[i].className = linkClass + ' shown';
} else {
maps[i].className = maps[i].className.replace(/ shown$/, '');
}
}

}

</script>

</head>

<body>

<div id="productButtons">
<input type="button" class="map1" value="Map 1" onclick="showMap(this);" />
<input type="button" class="map2" value="Map 2" onclick="showMap(this);" />
<input type="button" class="map3" value="Map 3" onclick="showMap(this);" />
</div>

<div id="maps">
<div class="map1">
<p onclick="this.parentNode.className='map1'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;z=6&amp;ll=39.011902,-98.484246&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;z=6&amp;ll=39.011902,-98.484246" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div class="map2">
<p onclick="this.parentNode.className='map2'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.334004,0.479279&amp;z=11&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.334004,0.479279&amp;z=11" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div class="map3">
<p onclick="this.parentNode.className='map3'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.082819,0.11982&amp;z=13&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.082819,0.11982&amp;z=13" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
</div>

</body>
</html>


Does that do the trick?

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
19-Oct-09 15:25
Hi Matt,

wow! Thanks for the code, that really helped, big time! I was struggling just how to start it.

This is somewhat similar to what I want, except instead of buttons, there will be links throughout my page. Also, the popup box will be popped-up relative to where the link is, rather than always popping up at the top left of the page. Is this possible? Will this be difficult? Please let me know.

Thanks in advance.
20-Oct-09 04:38
Hi webmonkey8,

Great stuff - glad it helped!

The simplest approach is probably to have each "map" div after the relevant text paragraph - it won't position it exactly next to the link, but it will be close:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style type="text/css">
#maps div { display: none; position: absolute; background: white; border: 5px solid gray; padding: 5px; margin-top: 10px; }
#maps div.shown { display: block; }
</style>

<script type="text/javascript">

function showMap(link) {
var linkClass = link.className;
var maps = document.getElementById('maps').getElementsByTagName('div');

// Show selected map and hide other maps

for ( i in maps ) {
if ( typeof(maps[i].className) == 'undefined' ) continue;

if ( maps[i].className.indexOf(linkClass) == 0 ) {
maps[i].className = linkClass + ' shown';
} else {
maps[i].className = maps[i].className.replace(/ shown$/, '');
}
}

}

</script>

</head>

<body>

<div id="maps">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="map1" href="#" onclick="showMap(this);">Map 1</a></p>

<div class="map1">
<p onclick="this.parentNode.className='map1'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;z=6&amp;ll=39.011902,-98.484246&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;z=6&amp;ll=39.011902,-98.484246" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="map2" href="#" onclick="showMap(this);">Map 2</a></p>

<div class="map2">
<p onclick="this.parentNode.className='map2'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.334004,0.479279&amp;z=11&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.334004,0.479279&amp;z=11" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="map3" href="#" onclick="showMap(this);">Map 3</a></p>

<div class="map3">
<p onclick="this.parentNode.className='map3'">Close Map</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.082819,0.11982&amp;z=13&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=kansas&amp;sll=37.0625,-95.677068&amp;sspn=47.033113,61.347656&amp;ie=UTF8&amp;hq=&amp;hnear=Kansas&amp;ll=39.011902,-98.484246&amp;spn=0.082819,0.11982&amp;z=13" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

</div>

</body>
</html>


Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
20-Oct-09 22:02
Thank you, Matt! That works.
21-Oct-09 00:34
No problem! If you have any more questions, feel free to ask.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
21-Jun-11 17:39
I could also use some help with my embedded Google map. I really don't want the location info window upon loading my page. Can you tell me how to load the map without the info window popup? Also, is there a way to set what part of the map shows upon loading?
23-Jun-11 03:50
@msdesign21: What do you mean by the "location info window"?

I set the locations shown in the map by first finding the location in http://maps.google.com/ , then clicking Link and copying and pasting the "<iframe..." HTML into the example page.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
12-Oct-11 07:54
Hi i need a help . i have created a map and i have uploaded the iframe coding in the website for the location. client need the address alone he dont need the info window popup. I really don't want the location info window upon loading my page. Can you tell me how to load the map without the info window popup? can anyone help
15-Oct-11 17:57
@kumtuha: See here:

http://www.wduffy.co.uk/blog/remove-address-bubble-from-google-maps-iframe/

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
25-Nov-11 10:06
Tried your solution, the map pops open then within seconds closes and redirects tot he home page...

I am looking for a map to pop open with a click and then close on the close button, only need one popup map.
26-Nov-11 02:36
@cannuck: Which solution?

Can you post the URL of your page so we can take a look?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
23-Feb-12 01:20
hi,
i have a problem that i want to decrease the size of the popup adress box in google map and also want to remove bottom hyperlinks like directions, search nearby, save to maps......

all this regarding to popup adress box

 
New posts
Old posts

Follow Elated