Here is a quick post about differences i noticed for Google Maps API v3 vs v2, while working on a Mashup , realized with Grails  and deployed on Google App Engine: i first created the Map (desktop release for Firefox, IE, Opera) with API v2, and declined a release of the mashup for the iPhone (Mobile Safari)…to have a Google Map support for iPhone, i used the Google Maps API v3.

I just describe the initialization of the page : create the map, center , set default zoom, add a marker with popup info:

Google Maps API v2

<head>

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

<script type="text/javascript">

var map;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));

<g:if test="${myCoordinates.latitude != null && myCoordinates.longitude != null}">
map.setCenter(new GLatLng(${myCoordinates.latitude}, ${myCoordinates.longitude}), 2);
var marker = new GMarker(new GLatLng(${myCoordinates.latitude}, ${myCoordinates.longitude}));
map.addOverlay(marker)
var picture = "<img src=\"${me.getProfileImageURL().toString()} \"/> ${me.getScreenName()}<br/>${me.getDescription()}"

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(picture);
});
</g:if>
map.addControl(new GLargeMapControl());
}
}

</script>

</head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas" style="width:800px;height:500px"></div>

</body>

Google Maps API v3

<head>

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

<script type="text/javascript">
var map;

function initialize() {
var latlng = new google.maps.LatLng(${myCoordinates.latitude}, ${myCoordinates.longitude});
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var infowindow = new google.maps.InfoWindow(
{ content: '<img src="${myPic}"/>${myScreenName}<br/>${myBio}'
});

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"${myScreenName}"
});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);
});

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>

Source : Google

Advertisement