Ниже приведены несколько примеров, которые могут помочь вам начать работу:
<!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>
Вам просто нужно изменить широту и долготу в методе GMap2.setCenter(). Последний параметр - это уровень масштабирования.
<!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>
При использовании версии 3 API Карт вам нужно будет передать параметры в качестве параметров конструктору google.maps.Map(). Приведенный выше пример не требует пояснений.
<img src="https://maps.google.com/maps/api/staticmap?center=51.49,-0.12&zoom=8&size=400x300&sensor=false" style="width: 400px; height: 400px;" />
API-интерфейс Static Map , как предложил luca, может быть очень хорошей идеей.
Просто передайте параметры широты и долготы в тег изображения, как в примере выше. Будет отображаться карта ниже, напрямую отрисованная от Google:
