Question

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>[phone]<br></span>', 29.725472,-95.386033, 4, 'http://www.conleym.com/map/icons/star-3.png'],

Thanks in advance for any help.

Answer 1

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', '[phone]', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],

//ROTHKO CHAPEL 
    ['Rothko Chapel', 'http://www.mfah.org/', 'Houston, TX 77006', '[phone]', 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', '[phone]', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png'],


// and so on...

];

Demo: Before and After