Sweet! Apple's iPhone

Wi-Fi, Bluetooth 2.0, Quad-Band GSM (yay! world-wide phone!), EDGE (No 3G!?)
OS X, Safari (I bet this will work just like Nokia's S60 browser.)
Collaboration with Yahoo - free IMAP email to all iPhone customers!
Google Maps and Widgets

I am hoping this will work wirh Skype, but I don't think Cingular will like it at all...

The Price:
4GB model = $499
8GB model = $599
Shipping in June!

Wait. This price is for 2-year contract with Cingular.... I knew it...

Source: Gizmodo

Using Google Maps API - Part.4: Info Window

Let's add more functions on the SFO map example.

Opening a Info Window

To create a basic baloon-like floating "info window", call the openInfoWindow(htmlElement) method, passing it a location and a DOM element as an argument to create a text node.

map.openInfoWindow(new GLatLng(37.622934, -122.392159),
                   document.createTextNode("SFO"));

or, use similar method openInfoWindowHtml(htmlString) which takes an HTML string as its argument rather than a DOM element.

map.openInfoWindowHtml(
 new GLatLng(37.622934, -122.392159), "SFO");

Opening a Info Window on Click

Simply calling these methods above just display the info windows upon loading the map. If you want the info window opened by clicking a marker, you need to use event listeners. The static method, GEvent.addListener takes a marker as the 1st argument, the event as the 2nd argument, and a function as the 3rd argument. The events provided by GMap2 Class include; click, infowindowopen and infowindowclose. To open a info window on click, write:

GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("SFO<br/>CA 94128");
    });

Finally, to give the event to the custom icon previously made, create a new function to combine both displaying the icon and call the click event. The function createMarker takes four arguments, latitude, longitude, icon image URL, and description (html).

In addition to the GIcon properties previously set, define infoWindowAnchor and infoShadowAnchor as well.

var desc_sfo ="SFO - San Francisco Intl Airport<br/>CA 94128";
var marker_sfo = createMarker(37.622934, -122.392159, "icons/sfo.png", desc_sfo);
map.addOverlay(marker_sfo);

function createMarker(lat, lng, ico, html) {
 var point = new GLatLng(lat, lng);
 
 if (ico!=null) {
  var icon = new GIcon();
  icon.image = ico;
  icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  icon.iconSize = new GSize(26, 44);
  icon.shadowSize = new GSize(50, 44);
  icon.iconAnchor = new GPoint(13, 44);
  icon.infoWindowAnchor = new GPoint(9, 2);
  icon.infoShadowAnchor = new GPoint(18, 25);
 }
 var marker = new GMarker(point, icon);
 GEvent.addListener(marker, 'click', function() {
  marker.openInfoWindowHtml(html);
  });
  return marker;
}

See also: Google Maps API Version 2 Reference

Using Google Maps API - Part.3: Create a Custom Icon

Let's continue on the quick guide of using Google Map API.

Using Custom Icons

The hardest part is creating graphics for your marker image and its shadow with Photoshop or something. The icons should be cretaed in 24-bit png format. For this example, I just tweaked the default icon (the color changed to blue, made it bigger, and typed "SFO" in it!) and used default shadow.

To replace the generic icon to your custom icon, add this code in the last script, before the line that begins with var marker = ...

var icon = new GIcon();
icon.image = "icons/sfo.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(26, 44);
icon.shadowSize = new GSize(50, 44);
icon.iconAnchor = new GPoint(13, 44);

First, create a new icon instance (line 1).
Next two lines indicate icon/shadow image source path or URL. (I use default shadow image on Google server).
Next two specifies the image dimention in pixels.
Anchor point of the icon is the "pointy" tip where also its shadow image originates. In this case, the anchor point is 13 pixels over and 44 pixels down from the top-left corner of the SFO icon, and this is defined by iconAnchor (line 6).

Location of the marker is defined by GMarker, just as you see in the last example, except, this time you need to add the 2nd paramter to include the custom icon. Finally, call addOverlay() method to dispaly thr marker icon.

var marker = new GMarker(new GLatLng(37.622934, -122.392159), icon);
map.addOverlay(marker);

Next: Opening an Info Window

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.

Using Google Maps API - Basic Map Part.1

Here's a quick start guide of using Google Map API.

Before Started

1. Sign up for the Google Maps API
2. Copy the generated key
3. Prepare to write a standards-compliant XHTML page with an appropriateDOCTYPE.

Get Started

Let's create a map indicating San Francisco International Airport (SFO).
First, include Google Maps JavaScript code source and your CSS in <head> section of HTML.

<script src="http://maps.google.com/maps?file=api&v=2&key=COPY_THE_KEY"
      type="text/javascript"></script>

<style type="text/css">
#mapSFO {height: 300px; width: 350px;}
</style>

Next, in <body>, create a placeholder of a map within a <div> with the map ID ("mapSFO").

Then creates a JavaScript GMap2 object to display a map. This GMap2 class represents a single map on the page. The center location of the map is defined in the next line, by latitude and longitude. The second parameter indicates the zoom level. 0 is most zoomed out and 17 is most detailed. (You can find any Latitude and longitude you want from geocoder.us)

<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);
</script>

View in browser. Now the map of SFO area is displayed.

Adding Controls

Optionally, you can add controls to the map with the addControl method.

  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl());

See how the controls are added:

Also try; GSmallMapControl to see how it looks like!

Display a Marker

Displaying map markers is defined by GMarker. This uses the default red Google Maps icon unless specified. In this example, I use GLatLang method to define the location of SFO, since I've set the center of the map slightly off in the beginning. You can use getCenter() method to display a marker at center.
Finally, call addOverlay() method to dispaly thr marker icon.

  var marker = new GMarker(new GLatLng(37.622934, -122.392159));
  map.addOverlay(marker);

This is how it looks like in browser:

See the entire XHTML

OK. I will post the rest later when I have time.
(Next: Using Custom Icons, and Opening an Info Window)