Google map markers rollover

Hi,

Since migrating from v.2 to v.3 of google maps everything works fine except the tooltips which used to appear on mouse over the markers.

Is there anything i can change in my code below to make them work in v3

function showTooltip(marker) {
            tooltip.innerHTML = marker.tooltip;
      var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
      var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
      var anchor=marker.getIcon().iconAnchor;
      var width=marker.getIcon().iconSize.width;
      var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y));
      pos.apply(tooltip);
      tooltip.style.visibility="visible";
      }


//  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
            tooltip.style.visibility="hidden"
        });  

Thank you for your time
b0byanAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Make sure the attributes you are accessing in the XML file are correct. For example, where you used "name", I used "title" on line 61 of my sample code.

The error message you included in your post looks like an Internet Explorer error. However, I was unable to reproduce the error in IE9. Are you testing in another version?

If you still cannot get it to work, try using my sample XML file for the Washington DC landmarks.
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker lng="-77.02305" lat="38.878287" title="Polygonal Address System" html="Water Street Southwest, Washington DC" />
<marker lng="-77.005614" lat="38.891212" title="Methodist Building" html="100 Maryland Avenue Northeast, Washington DC" />
<marker lng="-77.025996" lat="38.888735" title="Smithsonian Institution" html="1000 Jefferson Drive Southwest, Washington DC" />
<marker lng="-77.036517" lat="38.897678" title="The White House" html="1600 Pennsylvania Ave NW, Washington DC" />
<marker lng="-77.068416" lat="38.909737" title="Alexander Graham Bell Association" html="3417 Volta Place Northwest, Washington DC" />
<marker lng="-77.034379" lat="38.909" title="Grace Reformed Church" html="1405 15th Street Northwest, Washington, DC" />
<marker lng="-77.009613" lat="38.889856" title="U.S. Capitol" html="Capitol Hl, Washington DC" />
<marker lng="-77.033245" lat="38.881963" title="National Mall and Memorial Parks" html="900 Ohio Drive Southwest, Washington DC" />
</markers>

Open in new window

0
 
Tom BeckCommented:
Can you use custom_map_tooltip.js as in this example?
http://googlemapapitutorial.com/customizedtooltip.jsp
0
 
b0byanAuthor Commented:
Thanks, i've tried it but can't manage to make it work.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
b0byanAuthor Commented:
I've attached the page here.

The code worked in v2. Since google dissmised this version from 19th of november it's no longer working.

Any fast tweaks to the code are much appreciated.
gmap.js
0
 
Tom BeckCommented:
Try this, it's self contained. Just need your XML file and change the initial map center. It's a combination of your code, upgraded to v3 of the API and the custom tooltip example I posted earlier.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://googlemapapitutorial.com/js/custom_map_tooltip.js"></script>
<style type="text/css">
    body { margin: 20; padding: 20 }
	#map{
		width: 740px;
		height: 400px;
	}
	.tooltip { position:absolute;
		width: 145px;
		padding: 5px;
		border: 1px solid gray;
		font-size: 9pt;
		font-family: Verdana;
		background-color: #fff;
		color: #000;
	}
</style>
<script type="text/javascript">
var gmarkers = [];
var htmls = [];
var i = 0;
var map;
 
function initialize() {
    
	var myLatlng = new google.maps.LatLng(38.897678,-77.036517);
	var myOptions = {
      zoom: 14,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
      // create the map
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
	  
	  // ===== Start with an empty LatLngBounds object =====     
     var bounds = new google.maps.LatLngBounds();
 
      // Read the data from xml
	 $.ajax({
         type: "GET",
	     url: "WashingtonDC_landmarks.xml",
	     dataType: "xml",
	     success: function(data){
	      //GDownloadUrl("cities.php?page=<?php echo $_GET["page"]; ?>", function(data) {
          var markers = data.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new google.maps.LatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var name = markers[i].getAttribute("title");
            // create the marker
            var marker = createMarker(point,name,html);
			bounds.extend(point);
          }
		  // ===== determine the zoom level from the bounds =====
          map.fitBounds(bounds);
		}
    });
}

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
	var marker = new google.maps.Marker({
		map: map,
		position: point,
        tooltip: name
	});
		
    google.maps.event.addListener(marker, "click", function() {
    	var myPopUp = window.open(""+html+"", target="_self"); 
    });
		
    gmarkers[i] = marker;
    htmls[i] = html;
    i++;
		
    var tooltip = new Tooltip({map: map}, marker);
    tooltip.bindTo("text", marker, "tooltip");
 
    //  ======  The new marker "mouseover" and "mouseout" listeners  ======
    google.maps.event.addListener(marker,"mouseover", function() {
       tooltip.addTip();
       tooltip.getPos2(marker.getPosition());
    });        
    google.maps.event.addListener(marker,"mouseout", function() {
		tooltip.removeTip();
    });        
}
</script>
</head>
  <body onload="initialize()">
    <div id="map"></div>
</body>
</html>

Open in new window

0
 
b0byanAuthor Commented:
Hi, thanks for your feedback and sorry for the delay.

I've tried your suggestion but the tooltips still not working. I get an error on rollover

Message: 'get(...)' is null or not an object
Line: 86
Char: 3
Code: 0
URI: http://googlemapapitutorial.com/js/custom_map_tooltip.js
0
 
Tom BeckCommented:
Did you fix up the file path to your XML file? It needs to be accessible to the server path of your website.
0
 
b0byanAuthor Commented:
Yup, this is the first thing i've done!
0
 
b0byanAuthor Commented:
Managed to make it work eventually. You've been a great help!

Thanks for your time
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.