Pixel Development

GMap versions and PdMarker

There were major changes in 2.64 (through 2.75) that caused certain PdMarker features to fail. However, current versions of the Google Maps API work with the latest version of PdMarker.

Regarding Google Maps API Version 2

If this helps you, consider a donation towards this effort.

The present version of PdMarker now works with Google Maps API version 2 only. According to Google, sometime in the near future, version 1 will no longer be available, and all maps will need to use version 2 of the API. The above page has links regarding the required changes.

To use PdMarker, you will need to initialize your map with 'new GMap2' not 'new GMap'. Make sure you replace 'v=1' with 'v=2' in your inclusion of the Google Maps Javascript.

Google Maps Extension: PdMarker

PdMarker is a Javascript library that extends the Google Maps API, making it easier to customize marker behaviour. A basic understanding of the Google Maps API is recommended.

PdMarker Version: checking...

Marker Legend
A. Standard browser tooltip, help cursor
B. Click to show detail window
C. No tooltip, click for detail window
D. Click to change class & disable hiding
E. Marker reposition on hover

Notes
Marker tooltips will be shown to the left of the marker if there isn't space on the right.

Create maps with Virtual Google Earth!

Contact Pixel Development for customized Google Map work.

Skip down to Download

Try features live on the Testbed! New!

Simple Example

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example - simple</title>
    <style type="text/css">
       div.markerTooltip, div.markerDetail {
          color: black;
          font-weight: bold;
          background-color: white;
          white-space: nowrap;
          margin: 0;
          padding: 2px 4px;
          border: 1px solid black;
       }
    </style>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdefg"
           type="text/javascript"></script>
<script type="text/javascript" src="pdmarker.js"></script>

<script type="text/javascript">
//<![CDATA[
window.onload = onPageLoad;
var map;

function onPageLoad() {
    if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(49.28124, -123.12035), 17-5);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	marker = new PdMarker(new GLatLng(49.28124,-123.12035));
	marker.setTooltip("Vancouver");
	var html = "Visit <a href='http://www.yourvancouver.com'>Vancouver<\/a>";
	marker.setDetailWinHTML(html);
	marker.setHoverImage("http://www.google.com/mapfiles/dd-start.png");
	map.addOverlay(marker);

    }
}
//]]>
</script>

  </head>

  <body>
    <div id="map" style="width: 400px; height: 400px"></div>
    <!-- // define a place for PdMarker to calculate tooltip widths (optional) -->
    <div id="pdmarkerwork"></div>
  </body>

</html>

View this example.

Interface: GMap Extensions

This collection of functions makes it easier to maintain a dynamic collection of markers.

// get a marker by id
var marker = map.getMarkerById(50);

// walk through markers and do something to them
var marker = map.getFirstMarker();
while (marker != null)
{
	doMyFunction(marker);
	marker = map.getNextMarker();
}

// less efficient walk, but works
var count = map.getMarkerCount();
for (var i = 0; i < count; i++)
	doMyFunction(map.getNthMarker(i));

// special case: remove all markers (removeOverlays will remove paths as well)
var marker = map.getFirstMarker();
while (marker != null)
{
	marker.remove();	
	marker = map.getFirstMarker();
}

map.zoomToMarkers(); // center and zoom on markers
map.zoomToMarkers(5); // center and zoom with 5% slop
map.zoomToMarkers(5,2); // center and zoom with 5% slop, 2% vertical compensation

Interface: PdMarker - GMarker extensions

This collection of routines adds new functionality to markers supplied by the Google Maps API.

Creation

// marker creation examples
var marker = new PdMarker(new GLatLng(lat, long));
var marker = new PdMarker(new GLatLng(lat, long), icon);
var marker = new PdMarker(new GLatLng(lat, long), icon, "Vancouver Library");
// create a browser-style (built-in) tooltip title, not a PdMarker style tooltip
var marker = new PdMarker(new GLatLng(lat, long), { title: "title", icon: icon });

Data Storage

var id = marker.getId(); // retrieve internal id
marker.setId(20); // over-ride internal id

var name = marker.getName(); 
marker.setName("My School");

var user1 = marker.getUserData();
marker.setUserData("whatever");

var user2 = marker.getUserData2();
marker.setUserData2(3.1415926);

Behaviour

marker.display(false); // hide this marker

// warning: lots of blinking markers will slow your page
marker.blink(true,500); // make this marker blink every 1/2 second
marker.blink(false,0); // stop blinking

// basic marker detail window example (opening and closing handled)
marker.setTooltip("some text");
marker.setDetailWinHTML(html); // display this html when marker is clicked
marker.setHoverImage("http://www.google.com/mapfiles/dd-start.png");

// change marker appearance when hovering
GEvent.addListener(marker, "mouseover", function() {
	marker.setImage("images/markeryellow.png"); // change graphic
	marker.topMarkerZIndex(); // bring marker to top
	}); 

GEvent.addListener(marker, "mouseout", function() {
	marker.restoreImage();
	marker.restoreMarkerZIndex();
	});

// click on marker and tooltip stays around, changes css class
// click again to hide
GEvent.addListener(marker, "click", function() {
	if (marker.getMouseOutEnabled())
	{
		// don't hide on hover, disable setImage, restoreImage
		marker.setMouseOutEnabled(false);
		marker.setOpacity(100); // not transparent
		marker.setTooltipClass("markerTooltipAlternate"); // change css class
	}
	else
	{
		marker.setMouseOutEnabled(true); // hide after hover
		marker.setOpacity(70); // 30% transparent
		marker.resetTooltipClass(); // restore default css class
	}
	});

// Globally set left/right rules for tooltips
marker.allowLeftTooltips(false); // always on right side for ALL markers

var setting = marker.getTooltipHiding();
marker.setTooltipHiding(false); // never hide tooltip

// enable/disable setImage, restoreImage, and setHoverImage changes
marker.setImageEnabled(false); // don't allow changes to marker image

// change marker icon, see Google Map API regarding custom icons
marker.setIcon(icon);

// show help cursor when hovering, not for Explorer at present
marker.setCursor("help");

// standard browser tooltip, fast, lightweight, text only
marker.setTitle("Vancouver Library"); // not for Explorer at present
better:
marker = new PdMarker(posn, { title: "title", icon: myIcon });

// styled tooltip, draws to left when there is insufficient space on right
// style div.markerTooltip (see Simple Example) to define appearance
var html = "Styled tooltip<br/><img src='images/sample.jpg' height='100' width='100'/>";
marker.setTooltip(html); // html will appear on marker hover

marker.showTooltip(); // force tooltip to appear
marker.hideTooltip(); // force tooltip to hide

// set tooltip transparency, default is 70
marker.setOpacity(70); // 70% opaque (30% transparent)

// get the marker's latitude and longitude, and move it
var pt = marker.getPoint();
marker.setPoint(new GLatLng(pt.lat() + .1, pt.lng() + .1));

Benefits

Reduces the need for visitors to move a map
Quicker and more intuitive operation for visitor
Easier implementation for advanced features

Warnings

Users should first become familiar with the Google Maps API
Relies on undocumented details of the Google Map API
The Opera browser doesn't support transparency as of today

Revisions

Download

As stated above, this JavaScript library extension to the Google Maps API relies on undocumented details of the Google Map API. It is possible that the Google Maps team could make changes that will cause PdMarker to no longer work. Hopefully this won't happen, but if it does I'll do my best to get things working again.

Please leave the comment header intact, and download the library to your site (don't just link to my server).