Aşağıda size başlarken yardımcı olabilecek birkaç örnek:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.49, -0.12), 8);
</script>
</body>
</html>
Sadece GMap2.setCenter() yönteminde enlem ve boylamı değiştirmek gerekir. Son paramater yakınlaştırma seviyesidir.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(51.49, -0.12),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
Maps API sürümü 3 kullanırken, google.maps.Map() kurucusuna seçenekleri gibi parametreleri geçirmek gerekir. Yukarıdaki örnekte kendini açıklayıcı olmalıdır.
<img src="http://maps.google.com/maps/api/staticmap?center=51.49,-0.12&zoom=8&size=400x300&sensor=false" style="width: 400px; height: 400px;" />
Static Map API, luca suggested çok iyi bir fikir olabilir gibi.
Sadece yukarıdaki örnekte olduğu gibi, bir görüntü etiketi enlem ve boylam Paramaters geçmektedir. Bu doğrudan Google işlenen aşağıdaki haritayı, görüntüler:
