JavaScript - Google maps disable tooltip

Asked By Andy Kalbvleesch on 07-Oct-09 03:49 PM

I have a google maps setup. On mouseover the marker show a tooltip, onclick the tooltip disappears and an infowindow opens. However when I mouseover again over the marker the tooltip shows. I want the tooltip to not open when my infowindow is open and when I close the infowindow the tooltip should show when on mouse o0ver.


Below code. anybody ?

<script type="text/javascript">

var map;

function initialize() {

if (GBrowserIsCompatible()) {

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

var lat = <asp:Literal ID="ltrLat" runat="server" />;

var lng = <asp:Literal ID="ltrLng" runat="server" />;

var info = <asp:Literal ID="ltrinfo" runat="server" />;

var center = new GLatLng(lat, lng);

map.setCenter(center, 13);

map.setUIToDefault();

// create marker icon

var icon = new GIcon();

icon.image = "images/whelp_small.png";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

var marker = new GMarker(center,icon);

var tooltip = new Tooltip(marker,'HEB Grocery Store',4);

marker.tooltip = tooltip;

map.addOverlay(marker);

map.addOverlay(tooltip);

GEvent.addListener(marker,'mouseover',function(){

this.tooltip.show();

});

GEvent.addListener(marker,'mouseout',function(){

this.tooltip.hide();

});

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(info);

this.tooltip.hide();

});

}

}

function Tooltip(marker, text, padding){

this.marker_ = marker;

this.text_ = text;

this.padding_ = padding;

}

Tooltip.prototype = new GOverlay();

Tooltip.prototype.initialize = function(map){

var div = document.createElement("div");

div.appendChild(document.createTextNode(this.text_));

div.className = 'tooltip';

div.style.position = 'absolute';

div.style.visibility = 'hidden';

map.getPane(G_MAP_FLOAT_PANE).appendChild(div);

this.map_ = map;

this.div_ = div;

}

Tooltip.prototype.remove = function(){

this.div_.parentNode.removeChild(this.div_);

}

Tooltip.prototype.copy = function(){

return new Tooltip(this.marker_,this.text_,this.padding_);

}

Tooltip.prototype.redraw = function(force){

if (!force) return;

var markerPos = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());

var iconAnchor = this.marker_.getIcon().iconAnchor;

var xPos = Math.round(markerPos.x - this.div_.clientWidth / 2);

var yPos = markerPos.y - iconAnchor.y - this.div_.clientHeight - this.padding_;

this.div_.style.top = yPos + 'px';

this.div_.style.left = xPos + 'px';

}

Tooltip.prototype.show = function(){

this.div_.style.visibility = 'visible';

}

Tooltip.prototype.hide = function(){

this.div_.style.visibility = 'hidden';

}

</script>

Google maps disable tooltip

Sagar P replied to Andy Kalbvleesch on 08-Oct-09 01:36 AM

You can do this by using your own logic;

take one global variable like;

var showToolTip = 0;

And in event listener check this variables value and according to that write your logic;

See something like this;

GEvent.addListener(marker,'mouseover',function(){

if(showToolTip==0)

{

this.tooltip.show();

}

});

GEvent.addListener(marker,'mouseout',function(){

this.tooltip.hide();

});

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(info);

showToolTip=1;

this.tooltip.hide();

});

thanx

Andy Kalbvleesch replied to Sagar P on 08-Oct-09 05:16 AM

That works...

allmost

Andy Kalbvleesch replied to Sagar P on 08-Oct-09 03:01 PM

Hi Sujit,

I had to change the code a little bit because  I needed some xml datainput in my google maps. Now I have multiple markers and it doesn't completely work. I am kinda stuck... What happens now is that with code below when I close an info window it wont show the tooltip for the specific marker. What I need is to disable the tooltip from a specific marker when the infowindow is open. It should show the tooltip of other markers. When I close an infowindow it should reset the system and show all tooltips on mouseover.

Hope you can help. Thanx in advance.

Andy.

function load() {

if (GBrowserIsCompatible()) {

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

map.addControl(new GMapTypeControl());

//create randomnumber and retrieve xml file

var randomnumber=Math.floor(Math.random()*11111)

GDownloadUrl("data.xml?random="+randomnumber, function(data, responseCode) {

var xml = GXml.parse(data);

//store markers in markers array

var markers = xml.documentElement.getElementsByTagName("marker");

//loop over the markers array

for (var i = 0; i < markers.length; i++) {

var lat = parseFloat(markers[i].getAttribute("lat"));

var lng = parseFloat(markers[i].getAttribute("lng"));

var point = new GLatLng(lat,lng);

var html = markers[i].getAttribute("html");

var typeobject = markers[i].getAttribute("typeobject");

map.addControl(new GMapTypeControl());

map.setCenter(point, 13);

map.setUIToDefault();

if (typeobject=="koop") {

var icon = new GIcon();

icon.image = "images/whelp_small.png";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

}

else if (typeobject=="huur") {

var icon = new GIcon();

icon.image = "images/snelzoekenh1bg.gif";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

}

else if (typeobject=="iets") {

var icon = new GIcon();

icon.image = "images/snelzoekenh1bg.gif";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

}

else if (typeobject=="nogiets"){

var icon = new GIcon();

icon.image = "images/snelzoekenh1bg.gif";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

}

else{

var icon = new GIcon();

icon.image = "images/snelzoekenh1bg.gif";

icon.iconSize = new GSize(24, 23);

icon.iconAnchor = new GPoint(0, 20);

icon.infoWindowAnchor = new GPoint(5, 1);

};

var marker = createMarker(point,icon,html);

var tooltip = createTooltip(marker,html);

map.addOverlay(marker);

map.addOverlay(tooltip);

} //close for loop

}

); //close GDownloadUrl

} //close GBrowserIsCompatible

} //close load

function createTooltip(marker,html){

tooltip = new Tooltip(marker,html,4);

marker.tooltip = tooltip;

return tooltip;

}

function createMarker(point,icon,html){

var marker = new GMarker(point,icon);

var showToolTip = 0;

GEvent.addListener(marker,'mouseover',function(){

if(showToolTip==0)

{

this.tooltip.show();

}

});

GEvent.addListener(marker,'mouseout',function(){

this.tooltip.hide();

});

GEvent.addListener(marker,'mouseout',function(){

this.tooltip.hide();

});

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

showToolTip=1;

this.tooltip.hide();

});

GEvent.addListener(map,"infowindowclose", function() {

showToolTip=0;

});

return marker;

}

function Tooltip(marker, text, padding){

this.marker_ = marker;

this.text_ = text;

this.padding_ = padding;

}

Tooltip.prototype = new GOverlay();

Tooltip.prototype.initialize = function(map){

var div = document.createElement("div");

div.appendChild(document.createTextNode(this.text_));

div.className = 'tooltip';

div.style.position = 'absolute';

div.style.visibility = 'hidden';

map.getPane(G_MAP_FLOAT_PANE).appendChild(div);

this.map_ = map;

this.div_ = div;

}

Tooltip.prototype.remove = function(){

this.div_.parentNode.removeChild(this.div_);

}

Tooltip.prototype.copy = function(){

return new Tooltip(this.marker_,this.text_,this.padding_);

}

Tooltip.prototype.redraw = function(force){

if (!force) return;

var markerPos = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());

var iconAnchor = this.marker_.getIcon().iconAnchor;

var xPos = Math.round(markerPos.x - this.div_.clientWidth / 2);

var yPos = markerPos.y - iconAnchor.y - this.div_.clientHeight - this.padding_;

this.div_.style.top = yPos + 'px';

this.div_.style.left = xPos + 'px';

}

Tooltip.prototype.show = function(){

this.div_.style.visibility = 'visible';

}

Tooltip.prototype.hide = function(){

this.div_.style.visibility = 'hidden';

}

Re : almost
Sagar P replied to Andy Kalbvleesch on 09-Oct-09 12:11 AM

See the event which you have generated for close info window like;

GEvent.addListener(map,"infowindowclose", function() {

showToolTip=0;

});

It works on the map but it does not seem to work on the marker, although the documentation seems to indicate that it should work in both the map and the marker.

Try something like this;

This works:

map.openInfoWindowHtml(point, 'hello', {onCloseFn: function() {

showToolTip=0;

 }});

Try this;

http://groups.google.com/group/Google-Maps-API/browse_thread/thread/dc42b6d0b6490785/1abcc9d5edd04807?pli=1

siimple
Andy Kalbvleesch replied to Sagar P on 09-Oct-09 04:17 AM

Hi Sujit,


It was more simple I had to use marker instead of map in function below

GEvent.addListener(marker,"infowindowclose", function() {

showToolTip=0;

});