• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1241
  • Last Modified:

Google map markers rollover


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));

//  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
        GEvent.addListener(marker,"mouseout", function() {

Thank you for your time
  • 5
  • 4
1 Solution
Tom BeckCommented:
Can you use custom_map_tooltip.js as in this example?
b0byanAuthor Commented:
Thanks, i've tried it but can't manage to make it work.
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.
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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>
<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 }
		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;
<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
         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);
		  // ===== determine the zoom level from the 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;
    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() {
    google.maps.event.addListener(marker,"mouseout", function() {
  <body onload="initialize()">
    <div id="map"></div>

Open in new window

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
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.
b0byanAuthor Commented:
Yup, this is the first thing i've done!
Tom BeckCommented:
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"?>
<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" />

Open in new window

b0byanAuthor Commented:
Managed to make it work eventually. You've been a great help!

Thanks for your time
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.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now