1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Custom Icons for google maps

Discussion in 'JavaScript' started by z3d3m0n, Apr 23, 2008.

0
  1. #1
    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&amp;v=2&amp;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:
     
    z3d3m0n, Apr 23, 2008 IP
  2. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    GreatMetro, Apr 23, 2008 IP