Custom Icons Setup
I have this map page on a site I'm making for a restaurant: Currently
demo online at http://www.lavenham-photographic.co.uk/mariners/contact.htm
the Idea is to show the restaurant and the surrounding car parking. I
wanted the parking to show up with little parking icons!
And I've read various bits of code for changing the icons, but my
knowledge is limited to what Google can tell me, so i can't find the
correct way of calling up the icons I've specified.
Here's what I've done so far, it works but I don't know how to specify
which ones use my custom icon:
//<![CDATA[
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
var gmarkers = [];
var htmls = [];
var i = 0;
// ******** Here's my Custom Icon:
var parkingIcon = new GIcon();
parkingIcon.image = "images/parking.png";
parkingIcon.iconSize = new GSize(40, 53);
parkingIcon.shadow = "images/parkingshadow.png";
parkingIcon.shadowSize = new GSize(71, 54);
parkingIcon.iconAnchor = new GPoint(22, 53);
parkingIcon.infoWindowAnchor = new GPoint(1, 1);
parkingIcon.transparent = "mytran.png";
parkingIcon.printImage = "mymarkerie.gif";
parkingIcon.mozPrintImage = "mymarkerie.gif";
parkingIcon.printShadow = "myshadow.gif";
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(52.053632, 1.159873),15);
// Set up markers with info windows
var point = new GLatLng(52.052655, 1.159787);
var marker = createMarker(point,'<img src="images/googlelogo.jpg"
width="150" height="44" />')
map.addOverlay(marker);
var point = new GLatLng(52.053348, 1.159154);
var marker = createMarker(point,'Slade Street Parking')
map.addOverlay(marker);
var point = new GLatLng(52.053975, 1.160828);
var marker = createMarker(point,'Angel Lane Parking')
map.addOverlay(marker);
var point = new GLatLng(52.053101, 1.155844);
var marker = createMarker(point,'Parking')
map.addOverlay(marker);
var point = new GLatLng(52.055278, 1.154702);
var marker = createMarker(point,'Turret Lane Parking')
map.addOverlay(marker);
var point = new GLatLng(52.051732, 1.164079);
var marker = createMarker(point,'Duke Street Parking')
map.addOverlay(marker);
var point = new GLatLng(52.052279, 1.165044);
var marker = createMarker(point,'Fore Hamlet Parking')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
I've tried all sorts of icontype=[parkingIcon] etc etc, but I'm just
making it up as I go along!
One false move and the whole map stops loading!
Any help would be great! Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Google Maps API" group.
To post to this group, send email to google-maps-api@googlegroups.com
To unsubscribe from this group, send email to google-maps-api+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en
-~----------~----~----~----~------~----~------~--~---

0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home