Solved

Google map markers rollover

Posted on 2013-11-23
9
1,027 Views
Last Modified: 2013-11-26
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
0
Comment
Question by:b0byan
  • 5
  • 4
9 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39671358
Can you use custom_map_tooltip.js as in this example?
http://googlemapapitutorial.com/customizedtooltip.jsp
0
 

Author Comment

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

Author Comment

by:b0byan
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.
gmap.js
0
 
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>
<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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:b0byan
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
0
 
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.
0
 

Author Comment

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

Accepted Solution

by:
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"?>
<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
 

Author Closing Comment

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

Thanks for your time
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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 …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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)

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now