I need help replacing the usual bubbles with custom tooltips. I.e. rectangular boxes which appear next to the Google Map marker when I hover them. I've tried reading the info here but can't make head nor tail of it: econym.googlepages.com/tooltips.htm If there is a Google Map expert in the house, please look at the following code and tell me how to implement Tool tips. Thanks in advance. P.s. The following Google Map code needs to be run locally or with your own Google Map API key. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head profile="http://gmpg.org/xfn/11"> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAqZZaoSjOxNuocdScleVXgxRrUtFQbl3keoO1o51PTYSOT4NwmhSsha1fdD2mEiJslx097Sbf2tG9QQ" type="text/javascript"></script> <script type="text/javascript"> // Setup map and points var map; var icon0; var newpoints = new Array(); function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(loadMap); addLoadEvent(addPoints); // Define div to look for when placing map on page function loadMap() { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); // Center map at these coordinates & zoom level map.setCenter(new GLatLng( 51.954687, 0.874186), 4); map.setMapType(G_MAP_TYPE); // Setup icon to use icon1 = new GIcon(); icon1.image = "blob.png"; icon1.shadow = ""; icon1.iconSize = new GSize(10, 10); icon1.shadowSize = new GSize(0, 0); icon1.iconAnchor = new GPoint(5, 5); icon1.infoWindowAnchor = new GPoint(5, 5); icon1.infoShadowAnchor = new GPoint(0, 0); } function addPoints() { // Add points to map: Lat, Long, Icon to use, URL to redirect to, Text to popup in Tooltip newpoints[0] = new Array(51.954687, -0.874186, icon1, 'map.html', '<p>I am point 1</p>'); newpoints[1] = new Array(53.60147, 10.025711, icon1, 'map1.html', '<p>I am point 2</p>'); for(var i = 0; i < newpoints.length; i++) { var point = new GPoint(newpoints[i][1],newpoints[i][0]); var redirect = newpoints[i][3] ; var popuphtml = newpoints[i][4] ; var marker = createMarker(point,newpoints[i][2],redirect,popuphtml); map.addOverlay(marker); } } // Finally, create markers on map function createMarker(point, icon, redirect, popuphtml) { var marker = new GMarker(point,icon); marker.tooltip = '<div class="tooltip">'+popuphtml+'</div>'; GEvent.addListener(marker, "click", function() { var page="/"+redirect; window.location = page; }); GEvent.addListener(marker,"mouseover", function() { //alert (marker.tooltip) marker.openInfoWindowHtml(popuphtml); }); GEvent.addListener(marker,"mouseout", function() { marker.closeInfoWindow(); }); //var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>"; //var marker = new GMarker(point, icon); //GEvent.addListener(marker, "click", function() { // marker.openInfoWindowHtml(popuphtml); //}); return marker; } //]]> </script> <!-- Style for the Map and Tooltips --> <style type="text/css" media="screen"> #map { width:490px; height:450px; border: 4px solid #c00; z-index: 1; } .tooltip { height: 20px; border: 1px solid #000; padding: 2px; font-size: 100%; color: #000; z-index: 10; } </style> </head> <body> <!-- here's the map --> <div id="map"></div> </body> </html> Code (markup):
Not sure, but i never run my Google maps script in the head tag. It should be in the body after the <div id="map"> your javascript looks ok, but try simplifying things to start with to make sure it's all running. (for example take out the custom marker and so on)