My programming experience with Javascript is quite limited, but I have
done some useful maps by looking at code linked to in the
documentation for the API, and with the help of some fine people here
in the forum.
One technique was
var newIcon = MapIconMaker.createLabeledMarkerIcon({addStar: false,
label: "A", primaryColor: "#00ff00"});
var marker = new GMarker(new GLatLng(33.375395,-111.973499), {icon:
newIcon});
map.addOverlay(marker);
That took three lines to generate an of any color desired, with a
letter that could be different for each icon.
With the help of the people at ExpertsExchange I simplified this
technique into a Javascript function, that only requires one line per
icon.
function AddIcon(latitude, longitude, letter, color)
{
map.addOverlay(
new GMarker(
new GLatLng(latitude, longitude),
{icon: MapIconMaker.createLabeledMarkerIcon({addStar: false, label:
letter, primaryColor: color})}
)
);
}
And to create each icon takes one line:
AddIcon(28.239026,-82.185025, "A", "#ffff00"); // Zephyr Inn Motel
The only thing this does not do is let me put some HTML for a popup if
the icon is clicked.
I have found two sets of code that does that:
The first uses one of the Google World icons:
This is the function:
function createMarker1(point,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
And to invoke it:
var hotel = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/
pal2/icon20.png", null, "http://maps.google.com/mapfiles/kml/pal2/
icon20s.png");
var point = new GLatLng(33.377384,-111.976200);
var marker = createMarker1(point,'<div style="width:240px">The APCUG
Phoenix Regional is being held at the <a href="http://
www.uat.edu/">University of Advancing Technology<\/a><\/div>', uat)
map.addOverlay(marker);
The second creates a marker whose info window displays the letter
corresponding to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "http://www.google.com/mapfiles/marker"; + letter
+ ".png";
// Set up our GMarkerOptions object
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
});
return marker;
}
This creates a popup, but the popup for letter C just says Letter C.
What use is that?
map.addOverlay(createMarker(new GLatLng(33.378135,-111.978902),
2)); // C Sonic
I would like to take my function AddIcon(latitude, longitude, letter,
color) and add one more parameter, i.e. function AddIcon(latitude,
longitude, letter, color, html) but I can't figure out how to do it.
Please don't just point me to the definitions in the API; I know where
they are, I just don't understand javascript well enough to make use
of them.
Can you tell me how to add GEvent.addListener(marker, "click", function
() to my function?
Also I notice "click" Can that be change to "mouseover"?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
