API Google Maps
В установке Live Street проблем не оказалось достаточно все описано.
Вот решил «побаловаться плюшками» — попробывать API Google Maps и под свой проект установить карту с поиском на статичной странице движка. Далее описаны шаги ( собственно взятые с «просторов» Google ) и вроде всё было OK (пользовался браузером Firefox) пока не взглянул через IE8 и все их нумера.
Проблема описана в конце топика, может кто подскажет «где копать» кодировка базы utf8_general_ci.
Пошагово мои действия:
Шаг 1. В PhpMyAdmin выполнил следующий SQL-код создал таблицу "markers"
Шаг 2. Импортировал в созданную таблицу файл markers.sql (пример)
Шаг 3. Создал файл phpsqlinfo_dbinfo.php для соединения с базой данных
Шаг 4. Создал файл phpsqlsearch_genxml.php (в нем осуществляется поисковый запрос к таблице в базе данных и формируется XML-код с результатами поиска).
Шаг 5. Собственно сам index.html — содержит html, Java script и css код вывода карты и результатов поиска
Шаг App. Рабочий пример созданной карты .
Какова проблема работы данного примера ?!
В браузере IE работает только запросы в раскладке клавиатуры en например shop.
В базе данных в таблице name для примера сделано три записи (см. файл markers.sql ):
Вот решил «побаловаться плюшками» — попробывать API Google Maps и под свой проект установить карту с поиском на статичной странице движка. Далее описаны шаги ( собственно взятые с «просторов» Google ) и вроде всё было OK (пользовался браузером Firefox) пока не взглянул через IE8 и все их нумера.
Проблема описана в конце топика, может кто подскажет «где копать» кодировка базы utf8_general_ci.
Пошагово мои действия:
Шаг 1. В PhpMyAdmin выполнил следующий SQL-код создал таблицу "markers"
CREATE TABLE `markers` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(120) NOT NULL,
`adres` varchar(160) NOT NULL,
`lat` float(10,6) NOT NULL,
`lng` float(10,6) NOT NULL,
PRIMARY KEY (`id`),
FULLTEXT KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;Шаг 2. Импортировал в созданную таблицу файл markers.sql (пример)
INSERT INTO `markers` VALUES (1, 'Shop, "Smak"', ' г. Коломна, Ватутина ул., 1/40', 55.075554, 38.804996);
INSERT INTO `markers` VALUES (2, 'Магазин, "Смак"', ' г. Коломна, Ватутина ул., 1/40', 55.075554, 38.804996);
INSERT INTO `markers` VALUES (3, 'Центр помощи семье и детям "Гармония"', ' г.Коломна, ул., Олега Кошевого д.3', 55.076805, 38.807014);Шаг 3. Создал файл phpsqlinfo_dbinfo.php для соединения с базой данных
<?php
$sdb_name = "localhost";
$user_name = "ваш логин";
$user_password = "ваш пароль";
$db_name = "ваше имя базы данных";
// соединение с сервером базы данных
if(!$link = mysql_connect($sdb_name, $user_name, $user_password))
{
echo "
Не могу соединиться с сервером базы данных
";
exit();
}
// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
echo "
Не могу выбрать базу данных
";
exit();
}
mysql_query('SET NAMES utf8');
?>Шаг 4. Создал файл phpsqlsearch_genxml.php (в нем осуществляется поисковый запрос к таблице в базе данных и формируется XML-код с результатами поиска).
<?php
header("Content-type: text/xml");
require("phpsqlinfo_dbinfo.php");
// Get parameters from URL
$name = rawurldecode($_GET["name"]);
//echo $name, '
';
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Search the rows in the markers table
$result = mysql_query("SELECT * FROM markers WHERE MATCH ( name ) AGAINST('".$name."' IN BOOLEAN MODE)");
if (!$result) {
die("Invalid query:" . mysql_error());
}
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result))
{
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['adres']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
// echo $row['name'], ' ', $row['address'], '
';
}
echo $dom->saveXML();
?>Шаг 5. Собственно сам index.html — содержит html, Java script и css код вывода карты и результатов поиска
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Интерактивная карта Коломны
</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key="
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById('map'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(55.075222,38.804998), 14);
}
}
function searchLocations() {
var name = document.getElementById('addressInput').value;
var searchUrl = 'phpsqlsearch_genxml.php?name=' + name;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'Результата не найдено!';
map.setCenter(new GLatLng(55.075222,38.804998), 14);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));
var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b>
' + address;
GEvent.addListener(marker, 'click', function() {
map.setCenter(point);
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = '<b>' + name + '</b>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>
<style type="text/css">
body, table, p {
background-color: white;
font-family: Arial, sans-serif;
font-size: 12px;
color: rgb(118,118,118);
}
addressInput {
width: 800px;
}
#mapsearch {
width: 715px;
height: 25px;
margin-left: 0px;
padding: 0px;
border: 5px solid #fff;
}
.gsmsc-mapDiv {
height: 530px;
}
.gsmsc-idleMapDiv {
height: 550px;
}
</style>
</head>
<div id="map" style="margin: 0px 0px 10px 0px ; width: 1000px; height: 500px;">
</div>
<body onload="load()" onunload="GUnload()">
<div id="mapsearch">
<p>
<input style="border : 1px solid #FFC60C; background-color: #FFFFDB; width: 640px;" type="text" id="addressInput"/>
<input style="border : 1px solid #FFC60C; background-color: #FFC60C; font-family: Arial, sans-serif;" type="submit" onclick="searchLocations()" value="Найти"/>
</p>
</div>
<br />
<div id="mymap_div" style="width:715px;">
<div id="sidebar" style="margin-left: 0; padding: 5px 0px 5px 5px; border : none; float: bottom; width: 723px; height: 300px;">
</div>
</div>
</body>
</html>Шаг App. Рабочий пример созданной карты .
Какова проблема работы данного примера ?!
В браузере IE работает только запросы в раскладке клавиатуры en например shop.
В базе данных в таблице name для примера сделано три записи (см. файл markers.sql ):
Shop, «Smak»
Магазин, «Смак»
Центр помощи семье и детям «Гармония»
5 комментариев
может более универсальней? :)