Google maps карта в интернет страница | Новини

Начало > Новини > PHP > Google maps карта в интернет страница

Добре дошли в портала за новини,мнения и развлечение!

Software Explorer Portal e Free PHP CMS и Blog за всякакви теми в насока software.Можете да обсъждате ,да давате предложения и т.н.

www.board.shiko.eu

Новини

Google maps карта в интернет страница

10/03/2010 16:30 Автор

miki

55

Тази примерна страница ще използвам, за да Ви представя начина за включване на Google maps карта в HTML страница.

Ето най-важната част от използвания код:

<head>
<meta name="viewport" content="initial-scale=17.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(43.2123696308, 27.8632940935);
    var myOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"СД Нефертити"
});
var contentString = '<div id="content">'+
    '<h3 id="firstHeading" class="firstHeading">"Склад във Варна"</h3>'+
    '<div id="bodyContent">'+
    '<p><b><a href="http://www.nifertiti.eu/">СД Нефертити- Варна</a></b>, продава ' +
    'дървен и строителен материал.'+
    '</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:560px; height:420px">
</div>

Нека разгледаме подробно какво прави този код.

Първата meta дума: viewport задава началните условия за показване на картата: какъв да бъде началния мащаб, както и дали размерът на картата може да се променя от потребителя.
Следва указание за зареждане на самия JavaScript код за Google maps приложението. Настоящият пример ползва версия 3 на Google maps, която все още няма разновидности и адресът на JavaScript файла е просто http://maps.google.com/maps/api/js. Допълнително трябва да се укаже дали ще се ползва геопозициониране: sensor=true или sensor=false. Геопозиционирането използва реалните координати на потребители, които зареждат интернет страницата примерно на мобилния си телефон. В случая картата не зависи от такива координати и съответно е използван sensor=false.
Функцията initialize създава самата карта, като указва няколко важни параметъра:
- координатите на точката, която ще бъде център на картата. Тези координати-числа се съхраняват в променливата latlng и могат да се получат за желания от Вас адрес след подаване на заявка към Google maps сървър по следния начин. В адресното поле на браузъра въведете адрес:
  http://maps.google.com/maps/geo?q=търсен+адрес&output=формат&oe=utf-8&sensor=true_or_false&key=Вашия-Google-API-key
  - след q= въведете адреса, чиито координати търсите, като заменяте всички празни интервали между думите със знак +;
  - след output= въведете една от възможните стойности (xml, csv, kml, json) - това е вида, в който ще се покажат резултатите. Ако нямате специални изисквания, вида по подразбиране json ще Ви свърши работа;
  - sensor е използван в същия смисъл, който има думата в началото на JavaScript кода - дали информацията за геопозиционирането идва от устройство със сензор за локализиране. В конкретния случай използваме статична информация (адресът на обекта на картата не зависи от местоположението на потребителя) и sensor=false.
  - На мястото на Вашия-Google-API-key въведете реалната буквено-числена комбинация, която сте получили като API key. Ако все още нямате API key, Ви е необходима предварителна регистрация за Google акаунт, a самия API key ключ можете да получите от следната страница:Google maps API key.
- мащаба на картата, задаван с променливата zoom: по-голямо число означава по-голямо увеличение.
- типа на картата, зададен с "mapTypeId: google.maps.MapTypeId." и една от следните думи:
  - ROADMAP: картата по подразбиране - показани са пътищата
  - SATELLITE: карта със сателитни изображения, използвани от Google Earth
  - HYBRID: комбинация от пътна и сателитна карта
  - TERRAIN: физическа карта с особеностите на терена
- допълнително, макар и не задължително, е добавянето на показалец за обекти на картата. В настоящия пример е включен показалец чрез променливата marker, за която са указани координати (position: latlng - същите като центъра на картата), карта, на която да се покаже показалеца (трябва да е същата, като използваната - map) и заглавие (title), което ще се показва при поставяне на показалеца на мишката върху обекта.
- с променливата infowindow се създава прозорец, който ще извежда допълнителна информация за обекта, а самото съдържание на тази информация е поставено в променливата contentString.
- самото извикване на прозореца с допълнителна информация става с функцията
  google.maps.event.addListener(marker, 'mouseover', function() {
  infowindow.open(map,marker);
  });
  В случая за условие за отваряне на прозореца е избрано просто поставянето на показалеца на мишката върху обекта (mouseover), но вместо това бихме могли да сложим напр. click - прозорецът ще се отваря само при кликване върху обекта.
с функцията <body onload="initialize()"> се извиква JavaScript кода, който създава картата с вече зададените параметри, а самата карта се разполага в създадения специално за нея div елемент с име id="map_canvas".

Опитът - най-добрия учител

Обяснението на пръв поглед може да Ви се стори сложно, но един от най-изпитаните начини да научите нещо е да експериментирате с работещ модел. Можете да използвате картата на Дом на хумора и сатирата като отправна точка за своите опити и да смените координатите, размера и вида на картата, заглавието и допълнителната информация за обекта, както и при какви условия да се показва прозорецът с обяснения.

Разбира се, имате пълната свобода да решите в коя част на интернет страницата да се появи картата чрез CSS указания.

Ако целта Ви е съвсем простичка, статична карта, може би с подходяща модификация на примера "Дом на хумора и сатирата" ще постигнете желания резултат. Но ако искате да създадете по-сложни, интерактивни карти, които например да реагират на въведени от потребител стойности, най-добре е да погледнете официалната документация на Google maps.