Google Map API v3 multiple marker infowindow - hover html garbage

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>(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.

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', '(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

Answer 2

The title property of an HTML element (or a marker) does not support HTML markup. You shouldn't use the same string for the title and the InfoWindow HTML content. Add another element to your array, put the title in there for use in the title property of the marker and just put the HTML you currently have in the InfoWindow.

function createMarker(latlng, myTitle, myNum, myIcon) {
  var contentString = myTitle;        <-------------------- this appears in the InfoWindow
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: myIcon,
    zIndex: Math.round(latlng.lat() * -100000) << 5,
    title: myTitle,    <------------------------------------------- this is the tooltip
                                                                    appears on mouseover
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });

  markerArray.push(marker); //push local var marker into global array
}  <---------------------------------------------------------this close "}" is missing

You seem to have a bunch of garbage (the polygon definitions) included in your createMarker function, you really only want to add them once, not everytime you add a marker.