Related Topics
No topics are associated with this blog
Google Maps/Earth do not make icon creation & manipulation easy. Here are a couple of tips:
GIcon (look here: https://code.google.com/apis/maps/documentation/reference.html#GIcon) has a number of methods for creating and modifying an icon. I've found it's best to start with the default because adding features you expect is harder than you think.
// Here's how to create a new icon with the defaults
var newIcon = new GIcon(G_DEFAULT_ICON);
// To create a new icon like the default but yellow:
var yellowIcon = new GIcon(G_DEFAULT_ICON, "https://www.philadelphia-reflections.com/images/googlemapsmarkeryellow.png");
// To make use of that yellow icon and give it a tooltip
var point = new GLatLng(40.39, -75.34);
var marker = new GMarker(point, {icon:yellowIcon, title:"View Above Philadelphia"});
map.addOverlay(marker);
// To open a balloon when clicked
var message = " ... fill with text and HTML ... I've found tables are very helpful ";
GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(message);});
// Change icon on mouseover (see https://www.cems.uwe.ac.uk/~cjwallac/apps/phpxml/showIcons.php)
var msoverIcon = new GIcon(G_DEFAULT_ICON, "https://maps.google.com/mapfiles/kml/pal2/icon1.png");
GEvent.addListener(marker, 'mouseover', function() { marker.seticon(msoverIcon); });
Note: the "message" part of that snippet has to be escaped correctly.
See https://www.philadelphia-reflections.com/blog/1783.htm
(my thanks to https://centricle.com/tools/html-entities/ for HTML encoding)
Originally published: Wednesday, March 10, 2010; most-recently modified: Monday, June 04, 2012