Upgrade from Google Static Maps API to include zoom - google-maps-api-3

Question

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=false"></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

Answer 1

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