Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Google map markers rollover

Posted on 2013-11-23
Last Modified: 2013-11-26

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
Question by:b0byan
  • 5
  • 4
LVL 38

Expert Comment

by:Tom Beck
ID: 39671358
Can you use custom_map_tooltip.js as in this example?

Author Comment

ID: 39671401
Thanks, i've tried it but can't manage to make it work.

Author Comment

ID: 39671406
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.
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

LVL 38

Expert Comment

by:Tom Beck
ID: 39672153
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


Author Comment

ID: 39675515
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
LVL 38

Expert Comment

by:Tom Beck
ID: 39676022
Did you fix up the file path to your XML file? It needs to be accessible to the server path of your website.

Author Comment

ID: 39677266
Yup, this is the first thing i've done!
LVL 38

Accepted Solution

Tom Beck earned 500 total points
ID: 39677412
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


Author Closing Comment

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

Thanks for your time

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question