Google map markers rollover

Posted on 2013-11-23
Medium Priority
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.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses
Course of the Month16 days, 23 hours left to enroll

864 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