asked on

Change google bubble window

I got this code courtesy of ee - and it works great. But, I wanted to html coding to the bubble window, and change its size - I can't find the right way to code it, even after trying to modify what is in here. Can someone please let me know how to modify this to bring up a smaller window with some html coding. I do have a css file that I can put the correct info into, e.g., .bubble {parameters}, but have been unsuccessful in modifying the required information (highlighted below). Thanks.

?<php
$name = qsrequest("Restaurant");
$lat = qsrequest("Lat");
$lon = qsrequest("Lon");
$loc = qsrequest("Address");
 
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgg34O2VpxilZWuaGCTjEWRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR7fwovhx5-93XRmTM7DLy0zsDpGw&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
 
 
var map = null;
 
 
      
 
function initialize()
        {
        if (GBrowserIsCompatible())
                {
                map = new GMap2(document.getElementById("map_box"));
 
<?php
$a_MapData = array
        (
        'lat' => $lat,
        'lon' => $lon,
        'loc' => $loc,
              );
echo 'updateMap(' . addcslashes(json_encode($a_MapData), "'\\") . ');';
?>
                }
        }
 
function updateMap(o_Data)
        {
        map.setCenter(new GLatLng(o_Data.lat, o_Data.lon), 15);
// tried modifying this information, but could not get syntax right -would like it to display Name in bold, then a return, with address on second line (see print statements at end where this displays in a box at the bottom of the map)
 
        map.openInfoWindow(map.getCenter(),document.createTextNode(o_Data.loc));
// 
        map.setUIToDefault();
        map.addOverlay(new GMarker(new GLatLng(o_Data.lat, o_Data.lon)));
        }
</script>
 
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_box" style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 300px;"></div>
<div id="address" style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 70px; background-color: #FFFFFF">
</body>
</html>
<?php
print "<h1> $name </h1>";
print "<h2> $loc </h2>";
 
 
?>
 
</div>

Open in new window

Mick Barry

use html to format the text in the bubble

mgerney

ASKER

OK - I know that - but have been unsuccessful in adding html to the bubble. In the above code:

map.openInfoWindow(map.getCenter(),document.createTextNode(o_Data.loc));

there is not an html window - I have tried adding html coding to the variable (loc), but it just prints out the <br>. Are you suggesting that I can just do:
map.openInfoWindow(map.getCenter(),document.createTextNode(<h1>o_Data.loc</h1>)); and I've tried many combinations, changing out this line to become: map.openinfowindowhtml( etc.

doesn't work - I don't know javascript coding - I've tried copying coding from other sites that define windowinfohtml - but I have not succeeded.

Mick Barry

try using openInfoWindowHtml() and just pass it the html

an example here

http://www.danielgeale.com.au/training/index.html

mgerney

ASKER

This is not helpful - I need something much simpler - I admit I am not a coder - please don't send me to a "boxing site"
I need some very specific code to do what I want

ASKER CERTIFIED SOLUTION

Mick Barry

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mgerney

ASKER

Sorry - I didn't understand the code on the site - but the line you gave me worked great - I thought I had tried something like that, but I just couldn't seem to get the syntax just right - but THIS did it. Thanks so much, I really appreciate the help.