Hello i am creating a google maps for my web and can't create custom icons , all my attempts has failed , any help is appreciated Thx <!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en"> <head> <title>Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOml9ZvnXCleCoO16dwEQlBSqWcZ_oUK6nMsxDEeMWyk-b_pLORTV5EorNgls-ufTcc3EIYzkJ_bUyQ" type="text/javascript"></script> <script type="text/javascript" > // arrays to hold copies of the markers and html used by the sidebar var gmarkers = []; var htmls = []; var i = 0; var map; function load() { var icon = new GIcon(); icon.image = "http://www.google.com/mapfiles/turkey.png"; icon.shadow = "http://www.google.com/mapfiles/turkeyshadow.png"; icon.iconSize = new GSize(59, 62); icon.shadowSize = new GSize(91, 62); icon.iconAnchor = new GPoint(37, 59); icon.infoWindowAnchor = new GPoint(31, 8); } function createMarker(i, point, html, icon) { var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); // save the info we need to use later for the sidebar gmarkers[i] = marker; htmls[i] = html; return marker; } // This function picks up the click and opens the corresponding info window function myclick(i) { map.setZoom(12); map.setMapType(G_NORMAL_MAP); gmarkers[i].openInfoWindowHtml(htmls[i]); } function myclick2(i) { map.setZoom(8); map.setMapType(G_NORMAL_MAP); gmarkers[i].openInfoWindowHtml(htmls[i]); } function showDetail(i) { map.setZoom(15); map.setMapType(G_SATELLITE_MAP); myclick(i); } function loadMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(50.086564, 14.420728), 12); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); // Set up markers with info windows var point = new GLatLng(50.090744, 14.400714); var marker = createMarker(0, point,'<div style="width:500px"><img src="http://www.google.com/mapfiles/turkey.png" class="float-left" /><p><b>Prague Castle</b> was the seat of the and kings since the 9th century.</p><p>Learn more about <a href="#">Castle</a>.</p></div>'); map.addOverlay(marker); var point = new GLatLng(50.086517, 14.411364); var marker = createMarker(1, point,'<div style="width:270px"><img src="http://www.google.com/mapfiles/turkey.png" class="float-left" /><p><b>Bridge</b> is the oldest bridge in Prague. .</p><p>Learn more about <a href="#"> Bridge</a>.</p></div>'); 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"); } } function zoomTo(lat, long, scale, mt) { map.setZoom(scale); map.setMapType(mt); map.panTo(new GLatLng(lat, long)); } function resetMap() { map.setMapType(G_NORMAL_MAP); map.setCenter(new GLatLng(50.086564, 14.420728), 12); } </script> </head> <body class="a-00" onload="loadMap()" onunload="GUnload()"> <div id="map" style="width: 98%; height: 380px; padding: 4px; border: 1px solid #999; margin-top: 20px;"> <noscript> <p><b>JavaScript must be enabled in order to use our map of Prague.</b></p> <p>You can't see the map, because JavaScript seems to be either disabled or not supported by your browser. To view the Prague map, please enable JavaScript in your browser and try to reload this page.</p> </noscript> </div> <p><strong>Show on the map:</strong> <a href="javascript:myclick(0)"> Castle</a>, <a href="javascript:myclick(1)"> Bridge</a></p> </body> </html> HTML: