[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 718
  • Last Modified:

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

0
mgerney
Asked:
mgerney
  • 3
  • 3
1 Solution
 
objectsCommented:
use html to format the text in the bubble

0
 
mgerneyAuthor Commented:
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.

0
 
objectsCommented:
try using openInfoWindowHtml() and just pass it the html

an example here

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

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
mgerneyAuthor Commented:
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
0
 
objectsCommented:
I sent you there because it uses exactly what you need, with very specific code. Check the source for page, and search for openInfoWindowHtml()

your code will need to look something like

map.openInfoWindowHtml(map.getCenter(), "

" + o_Data.loc + "

");

0
 
mgerneyAuthor Commented:
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.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now