Question

This is the page in question…

http://dev.digitalskydesign.com/locations/

Go there, hover over one of the ‘green’ icons on the Google Map. Before you click it just hover over it and you’ll see that a bunch of the code pops up.

I don’t want that code to appear at all but I’m having a hard time figuring out how to handle that in my JavaScript code.

The JavaScript code that handles this map is found here…

http://dev.digitalskydesign.com/wp-content/themes/Teamsters-FCU/locations-iframe.php

There is also a .txt file called ‘branch-locations.txt’ that is basically just addresses and the geocodes for all of the map marker locations.

I’m not a JavaScript guru (just a web designer) so if you could tell me what code to modify / include as well as where to put it, that would be much appreciated.

Thanks guys!

Answer 1

It seems like you have html in your tooltip property.

It seems the code: var label = points[i].textArray[2];
is causing the issue.

If you desire HTML Markup for the tip you will need to add an event to the mouseover event of the marker which displays the toolTip in an element and the adds an event on mouseout to remove the tip element.

The other option you have is to change the label to something without HTML Markup.

An example of adding the Tip with JavaScript code is below:

Some of which was taken from How to call fromLatLngToDivPixel in Google Maps API V3?

//You need this to get the projection... put this code at the top of your javascript after you declare map
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); //Where map is your Map2 instance

//Put this code at line 164
var label = '';
points[i].marker = new GMarker(points[i],{title: label, icon:tinyIcon(opts.icon)});
google.maps.event.addListener(points[i].marker, 'mouseover', function() {

//Create the tip and get the Point so position the tip
var toolTip = document.createElement('div'),        
    point = overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
toolTop.styles.position = 'absolute';
toolTop.styles.left = point.x;
toolTop.styles.top = point.y

document.body.appendChild(toolTip);

google.maps.event.addListener(this, 'mouseout', function() {
    document.body.removeChild(toolTip);
  });

});