Upgrade from Google Static Maps API to include zoom

At the moment I use Google Static Maps API:

<img src="http://maps.google.com/maps/api/staticmap?center={$listing.City},{$listing.State}&zoom=5&size=145x145&maptype=roadmap&sensor=fal开发者_开发技巧se"></img>

As you can see I am using Smarty to populate the location with:

{$listing.City},{$listing.State}

I would like to add a marker and zoom control utilizing Google Maps API v3. What is the most efficient way to achieve this? I assume I need to use geocoding?

Thanks

I recently had a project that include a Google Map using API v3. I chose to wrap the API into a jQuery plugin. The API is pretty straight forward. Here is a link to a blog post where I talk about the jQuery plugin. More importantly, you can get the plugin code. That code shows all the details on how to create a map and add markers.

http://blog.bobcravens.com/2010/06/a-google-maps-version-3-jquery-plugin/

Here are a few snippets of importance:

Include the following in your header:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

This snippet creates a map:

   var latlng = new google.maps.LatLng(lat, lng);
    var settings = {
        zoom: options.zoom,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: options.navControl,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var theMap = new google.maps.Map($("#div_id")[0], settings);

To add an overlay do the following:

    var latlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: theMap,
        title: "title"
    });

I encourage you to look at the plugin for more details. Hope this helps.

Bob