Change google bubble window

Posted on 2009-04-26
Last Modified: 2012-05-06
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.

$name = qsrequest("Restaurant");

$lat = qsrequest("Lat");

$lon = qsrequest("Lon");

$loc = qsrequest("Address");




<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Google Maps JavaScript API Example</title>

<script src="" type="text/javascript"></script>

<script type="text/javascript">



var map = null;



function initialize()


        if (GBrowserIsCompatible())


                map = new GMap2(document.getElementById("map_box"));



$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.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.addOverlay(new GMarker(new GLatLng(, o_Data.lon)));





<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">




print "<h1> $name </h1>";

print "<h2> $loc </h2>";



Open in new window

Question by:mgerney
    LVL 92

    Expert Comment

    use html to format the text in the bubble


    Author Comment

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


    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.

    LVL 92

    Expert Comment

    try using openInfoWindowHtml() and just pass it the html

    an example here


    Author Comment

    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
    LVL 92

    Accepted Solution

    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 + "



    Author Closing Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Suggested Solutions

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now