2015-05-10
396
Путь к руководству:
https://developers.google.com/maps/?hl=ru→Документация (в списке слева) →JavaScript API Google Карт→Руководство для разработчиков
1.6.1 Начало работы:
Первые шаги:
Легче всего начать ознакомление с API Google Карт, рассмотрев простой пример. На следующей веб-странице отображается карта с центром в Сиднее (Новый Южный Уэльс, Австралия):
<!DOCTYPE html>
<html>
<head>
<metaname=”viewport”content=”initial-scale=1.0, user-scalable=no”/>
<styletype=”text/css”>
html {height:100%}
body {height:100%;margin:0;padding:0}
#map_canvas{height:100%}
</style>
<scripttype=”text/javascript”
src=”http://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &sensor= SET_TO_TRUE_OR_FALSE ”>
</script>
<scripttype=”text/javascript”>
function initialize(){
varmapOptions={
center:newgoogle.maps.LatLng(-34.397,150.644),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map =newgoogle.maps.Map(document.getElementById(“map_canvas”),
mapOptions);
}
</script>
</head>
<bodyonload=”initialize()”>
<divid=”map_canvas”style=”width:100%;height:100%”></div>
</body>
</html>
Объявление приложения в виде документа HTML5
Рекомендуем вам использовать в веб-приложении настоящую инструкцию DOCTYPE. В приведенных примерах для объявления приложения в качестве документа HTML5 используется простой HTML5 DOCTYPE:
|
|
|
<!DOCTYPE html>
Большинство современных браузеров отображают содержание, объявленное с помощью инструкции DOCTYPE, в "стандартном режиме". Это означает, что приложение будет совместимо с различными браузерами. Элемент DOCTYPE создан таким образом, чтобы его присутствие корректно обрабатывалось браузерами, которые этот элемент не поддерживают. Такие браузеры проигнорируют его и отобразят содержание в "режиме совместимости".
Обратите внимание, что некоторые CSS, работающие в режиме совместимости, являются недопустимыми в стандартном режиме. В частности, все элементы, размеры которых выражены в процентах, должны наследовать от элементов родительских блоков. Если для родительского элемента размер не указан, будет предполагаться, что он составляет 0 x 0 пикселей. По этой причине в код включено следующее объявление <style>:
<styletype="text/css">
html{height:100%}
body{height:100%;margin:0;padding:0}
#map_canvas{height:100%}
</style>
Объявление CSS указывает, что контейнер карты <div> (с именем map_canvas) должен занимать 100% высоты элемента HTML body. Обратите внимание, что требуется также особо объявить эти процентные значения для <body> и <html>.
