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

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"
<html xmlns="">
    <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;
<script src=""
<script type="text/javascript" src="pdmarker.js"></script>

<script type="text/javascript">
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));
	var html = "Visit <a href=''>Vancouver<\/a>";



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


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)
	marker = map.getNextMarker();
// less efficient walk, but works
var count = map.getMarkerCount();
for (var i = 0; i < count; i++)
// special case: remove all markers (removeOverlays will remove paths as well)
var marker = map.getFirstMarker();
while (marker != null)
	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.


// 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();
var user2 = marker.getUserData2();


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
// 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() {
// 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.setOpacity(100); // not transparent
		marker.setTooltipClass("markerTooltipAlternate"); // change css class
		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
// show help cursor when hovering, not for Explorer at present
// standard browser tooltip, fast, lightweight, text only
marker.setTitle("Vancouver Library"); // not for Explorer at present
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( + .1, pt.lng() + .1));


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


  • 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



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

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

This software is provided as is, without expressed or implied warranty. I am licensing PdMarker under LGPL, which means that:

LGPL allows you to link in other work to create derivative without actually *incorporating* the open source code into your application. This allows people to link to GPL'd libraries without having any concern of having to open source their own applications under any circumstances, which is why I think the LGPL is a "safer" license for Google Maps extensions. - J. Shirley

Download pdmarker.js


GMap Article
Article on the Google Maps API (this site)
Virtual Google Earth
Explore the World, create maps (this site)
Photographs linked to a Google Map (this site)
Documentation for the Google Maps API
PdMarker Thread
Discuss this article on the Google Maps API forum
GMap Forum
Google Maps API forum