Вставка google map api и маркеров на JavaScript

JavaScript добавления карты

Пример кода JavaScript:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
$(function(){ 
 var myLatlng = new google.maps.LatLng(-34.397, 150.644);
 var myOptions = {
 zoom: 10,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
});
</script>

И место (div) куда разместить карту:

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

Разбираем код

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
- Подключаем библиотеку google maps api

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
- Переменная с координатами центра карты

...(-34.397, 150.644); - координаты места которое нужно отобразить.
Координаты удобно узнавать:

• На сайте mapcoordinates.net
• В адресной строке google.ru/maps/
  
• Или через яндекс карты, выбрать этот инструмент
  
  Кликнуть по месту координаты которого нужны.
  

zoom: 10 - уровень маштабирования.
center: myLatlng - фокус.
mapTypeId: google.maps.MapTypeId.ROADMAP - тип карты, всего 4 типа:

• ROADMAP – стандартные двухмерные фрагменты Google Карт.
• SATELLITE – фрагменты, представленные сделанными со спутника фотографиями.
• HYBRID – фотографические фрагменты с наложенным слоем, содержащим наиболее важные объекты (дороги, названия городов).
• TERRAIN – фрагменты топографической карты с рельефом местности, высотами и гидрографическими объектами (горы, реки и т. д.).

Добавление маркера(метки)

Код:

var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 title:"Archive vikingS" 
}); 

position: - Координаты метки.
map: - обьект map на который нужно поместить маркер.
title: - надпись при наведении.
animation: - Анимация маркера (animation: google.maps.Animation.DROP) может быть двух видов :

• DROP - Маркер падает сверху на указаное место и анимация останавливается.
• BOUNCE - Маркер прыгает на месте до тех пор пока анимации не будет задано значение null.
  Например: animation: google.maps.Animation.DROP

draggable:true - используется при необходимости изменить стандартные события маркера при нажатии, наведении и тд.
icon: - путь до иконки если нужно заменить стандартную, например '/avlogo150x130.png' .

Подробнее о маркерах и наложениях.