Thursday, October 12, 2006

Using Google Maps API - Basic Map Part.2 (Source Code)

The entire XHTML code (so far) looks like this:

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY"
      type="text/javascript"></script>

 <style type="text/css">
  body { font:12px Arial,Verdana,Helvetica,sans-serif;}
  #mapSFO {height: 300px; width: 350px;}
 </style>
  </head>
  <body>
 <!-- No JavaScript Message -->
   <noscript>
 <div class="noscript">
 <b>JavaScript must be enabled in order for you to use Google Maps.</b> <br/><br/>
      It seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, please enable JavaScript by changing your browser options, and then 
      try again.
  </div>
    </noscript>
 
 <!-- Map Placeholder -->
 <div id="mapSFO"></div>
 
 <script type="text/javascript">
    //<![CDATA[
 
 var map = new GMap2(document.getElementById("mapSFO"));
 map.setCenter(new GLatLng(37.632934, -122.392159), 12);
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.addControl(new GScaleControl());
 
 var marker = new GMarker(new GLatLng(37.622934, -122.392159));
 map.addOverlay(marker);
    </script>
  </body>
</html>

See Screenshot of the sample map.

Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)