Q:

Google Map API v3 multiple marker infowindow - hover html garbage

Gotta start off by saying I'm a javascript newbie....
I borrowed some code example from the following question on stackoverflow.com:
Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers
The problem is that when I've added in some styling to the infoWindow, the hover is showing all the html garbage:
I'm too new to upload an image, but here is a working link that will show the problem. 
link: http://www.conleym.com/map/google_maps_code_10_zoom_working.html
So my question is - is there an easy way to eliminate the style information on the hover, or is there a way to just disable the hover so the user won't see it? 
Here is an example of what I've used:
['<a style="font-family: Arial" href="http://www.mfah.org/" target="_blank"><b>The Holocaust Museum</b></a><br><span style="font-size: 12px; font-family: Arial;">1001 Bissonnet Street<br> Houston, TX 77005<br>(713) 639-7300<br></span>', 29.725472,-95.386033, 4, 'http://www.conleym.com/map/icons/star-3.png'],

Thanks in advance for any help. 

A:

The createMarker function was really designed for markers with plain text titles.  I would suggest modifying that function to accommodate the additional pieces of information you have, namely: link (URL), address, and phone. 
Instead of using the same myTitle for both the contentString for the info window and the hover-over text (title), you should create the HTML markup within the function, based on the supplied title, link, address, and phone.  The createMarker function becomes:
function createMarker(latlng, myTitle, myLink, myAddress, myPhone, myNum, myIcon) {
    var contentString = '<a style="font-family: Arial" href="' +
        myLink + '" target="_blank">' + myTitle +
        '</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> ' +
        myAddress + '<br>PHONE<br>' + myPhone + '</span>';

    var marker = new google.maps. Marker({
        position: latlng,
        map: map,
        icon: myIcon,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title: myTitle,
    });

    // ...

You'll have to update the call to the function to pass the correct arguments:
createMarker(new google.maps. LatLng(locations[i][4], locations[i][5]), locations[i][0], locations[i][1], locations[i][2], locations[i][3], locations[i][6], locations[i][7]);

location[i][0] is the name/title of the location
location[i][1] is the link
location[i][2] is the address
location[i][3] is the phone number
location[i][4] is the latitude of the location
location[i][5] is the longitude of the location
location[i][6] is the myNum (which really isn't being used anywhere)
location[i][7] is URL to the marker icon

Now, you can encode your data source more cleanly.  For example:
var locations = [    

//====================== ZONE 1 MUSEUMS  ==========================
//THE MENIL COLLECTION  
    ['The Menil Collection', 'http://www.mfah.org/', 'Houston TX 77006', '(713) 639-7300', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],

//ROTHKO CHAPEL 
    ['Rothko Chapel', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.737822,-95.395725, 2, 'http://www.conleym.com/map/icons/world.png'],

//HOUSTON CENTER for PHOTOGRAPY 
    ['Houston Center for Photography', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png'],

// and so on...

];

Demo: Before and After

