Организация добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL (версия для API Google Maps v3)

Автор: | 24.04.2011
36 комментариев

На своем блоге я уже писал заметку на тему «Организация добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL» и в ней использовалась API Google Maps версии 2.

В этой же заметке я обещал написать о том, как можно сделать тоже самое применяя API Google Maps версии 3, выполняю свое обещание.

С начала перечислю файлы которые мы будем использовать для данной версии без изменения.

Это файлы:

phpsqlinfo_dbinfo.php — для соединения с базой данных;
phpsqlinfo_addrow.php — для записи введенных данных о метке в таблицу markers;
upload.php — выбор информации о метках из базы данных и формирования ответа в формате JSON.

Основным файлом нашего примера будет файл phpsqlinfo_add.html.

Начнем заново формировать код данного файла, по ходу описания я буду отмечать особенности присущие для версии 3 API Google Maps.

Начнем с отображения карты с элементами управления.

Первоначальный код нашего файла phpsqlinfo_add.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>API Google Maps v3 добавление меток пользователями и вывод их по категориям</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script src="../jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
  function initialize() {
    var myLatlng = new google.maps.LatLng(56.32,44.004);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script> 
 
<style type="text/css" media="screen"> 
#map_canvas { float:left; width:600px; height:400px; border:1px solid #000;} 
ul#markerTypes { float:left; width:500px; list-style:none; padding:0; } 
ul#markerTypes li { padding:10px; } 
ul#markerTypes li label{ color: #000; } 
</style>
 
</head> 
<body onload="initialize()"> 
      <div id="map_canvas"></div>
 
 
	<ul id="markerTypes"> 
			<li><label for="viv_bars"><input id="barbox" type="checkbox" value="bar" /> Бары</label></li> 
			<li><label for="viv_cafe"><input id="cafebox" type="checkbox" value="cafe" /> Кафе</label></li> 
			<li><label for="viv_rest"><input id="restaurantbox" type="checkbox" value="restaurant" /> Рестораны</label></li>			 
		</ul>
 
    <div id="message"></div>
</body> 
</html>

Здесь есть отличие подключения API и инициализации карты от верии 2.

1. Нет ключа API для привязки к конкретному домену, здесь подключение API-карт производится строкой

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2. Параметры карты задаются отдельным набором свойств myOptions

var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

3. Все глобальные имена из API начинаются с google.maps. вместо G.

Следующий этап — это реализация добавления меток пользователями.

Измененный код файла phpsqlinfo_add.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>API Google Maps v3 добавление меток пользователями и вывод их по категориям</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script src="../jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
  function initialize() {
    var myLatlng = new google.maps.LatLng(56.32,44.004);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
     var html = "<table>" +
                         "<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" +
                         "<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" +
                         "<tr><td>Тип:</td> <td><select id='type'>" +
                         "<option value='bar' SELECTED>Бар</option>" +
                         "<option value='restaurant'>Ресторан</option>" +
                         "<option value='cafe'>Кафе</option>" +
                         "</select> </td></tr>" +
                         "<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>";
 
    infowindow = new google.maps.InfoWindow({
     content: html
    });
 
    google.maps.event.addListener(map, "click", function(event) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });	
  }
 
  function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();
 
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Данные добавлены.";
        }
      });
    }
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function doNothing() {}
 
</script> 
 
<style type="text/css" media="screen"> 
#map_canvas { float:left; width:600px; height:400px; border:1px solid #000;} 
ul#markerTypes { float:left; width:500px; list-style:none; padding:0; } 
ul#markerTypes li { padding:10px; } 
ul#markerTypes li label{ color: #000; } 
</style>
 
</head> 
<body onload="initialize()"> 
      <div id="map_canvas"></div> 
 
	<ul id="markerTypes"> 
			<li><label for="viv_bars"><input id="barbox" type="checkbox" value="bar" /> Бары</label></li> 
			<li><label for="viv_cafe"><input id="cafebox" type="checkbox" value="cafe" /> Кафе</label></li> 
			<li><label for="viv_rest"><input id="restaurantbox" type="checkbox" value="restaurant" /> Рестораны</label></li>			 
		</ul>
 
    <div id="message"></div>
</body> 
</html>

В переменную html мы добавляем код формы для ввода параметров метки.

И в балун добавляем нашу переменную html.

Затем мы обрабатываем события клика по карте, при этом событии на карту добавляется маркер, а при клике на маркере открывается балун с нашей формой.

После нажатия на кнопку Сохранить, введенные в форму параметры предаются в функцию saveData.

В ней методом GET данные передаются в файл phpsqlinfo_addrow.php для записи в базу данных.

Если запись прошла успешно, то выводится сообщение о добавлении данных.

Последний этап это реализация вывода маркеров из базы данных по категориям.

Окончательный код файла phpsqlinfo_add.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>API Google Maps v3 добавление меток пользователями и вывод их по категориям</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script src="../jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
 
var map, marker, gmarkers = [];
 
var customIcons = {
      restaurant: {
        icon: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_blue.png',
        shadow: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png',
        shadow: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_shadow.png'
      },
	  cafe: {
        icon: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_green.png',
        shadow: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_shadow.png'
      }	  
    };
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(56.32,44.004);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
$('#markerTypes input[type="checkbox"]').bind('click', function () {
 
var markersType = $(this).val();
 
if($(this).attr("checked")) {
 
if(!gmarkers[markersType]) {
 
gmarkers[markersType] = [];
 
$.getJSON("http://localhost/gmaps/gmaps-dob/upload.php", {markersType:markersType}, function(data){
 
setMarkers(data, markersType);				
 
});
 
}
else {
show(markersType);
}
 
}
else {
hide(markersType);
}
});	
 
     var html = "<table>" +
                         "<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" +
                         "<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" +
                         "<tr><td>Тип:</td> <td><select id='type'>" +
                         "<option value='bar' SELECTED>Бар</option>" +
                         "<option value='restaurant'>Ресторан</option>" +
                         "<option value='cafe'>Кафе</option>" +
                         "</select> </td></tr>" +
                         "<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>";
    infowindow = new google.maps.InfoWindow({
     content: html
    });
 
    google.maps.event.addListener(map, "click", function(event) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });	
  }
 
  function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();
 
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Данные добавлены.";
        }
      });
    }
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function doNothing() {}	
 
	function setMarkers(data, category) {
 
	var infoWindow = new google.maps.InfoWindow;	 
	var baseIcon = customIcons[category];	
 
	var marker_point = new Array();
    var html = new Array();
 
	for(var i = 0; i < data.markers.length; i++) {	
    	marker_point[i] = new google.maps.LatLng(data.markers[i].lat, data.markers[i].lon);	
	html[i] = '<strong>'+data.markers[i].mname+'</strong><br />'+data.markers[i].address;
	createMarker(marker_point[i], html[i], baseIcon, infoWindow, category);
	}
 
}
 
function createMarker(point, html, icon, infoWindow, category) {
	 var marker = new google.maps.Marker({
            map: map,
            position: point,
             icon: icon.icon,
            shadow: icon.shadow           
          });
 
  marker.mycategory = category; 
 
  google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
  gmarkers.push(marker);
  return marker;
}
 
 
function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }
 
      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }
 
</script> 
 
<style type="text/css" media="screen"> 
#map_canvas { float:left; width:600px; height:400px; border:1px solid #000;} 
ul#markerTypes { float:left; width:500px; list-style:none; padding:0; } 
ul#markerTypes li { padding:10px; } 
ul#markerTypes li label{ color: #000; } 
</style>
 
</head> 
<body onload="initialize()"> 
      <div id="map_canvas"></div>
 
	<ul id="markerTypes"> 
			<li><label for="viv_bars"><input id="barbox" type="checkbox" value="bar" /> Бары</label></li> 
			<li><label for="viv_cafe"><input id="cafebox" type="checkbox" value="cafe" /> Кафе</label></li> 
			<li><label for="viv_rest"><input id="restaurantbox" type="checkbox" value="restaurant" /> Рестораны</label></li>			 
		</ul>
 
    <div id="message"></div>
</body> 
</html>

В начале перед инициализацией карты мы задаем файлы для отображения значков меток, различные в зависимости от категории.

После этого, аналогично версии для API Google Maps v2, мы используя библиотеку jQuery, добавиляем обработчик события выбора соответствующей категории (checkbox), если влажок для категории установлен в асинхронном режиме с помощью функции getJSON производиться GET запрос к файлу upload.php, в котором выполняется обращение к таблице в базе данных для выбора параметров меток для данной категории.

В файле upload.php также из полученных данных формируется ответ в формате JSON, который затем передается в функцию setMarkers для обработки.

Функция setMarkers будет иметь другой вид:

function setMarkers(data, category) {
 
	var infoWindow = new google.maps.InfoWindow;	 
	var baseIcon = customIcons[category];	
 
	var marker_point = new Array();
    var html = new Array();
 
	for(var i = 0; i < data.markers.length; i++) {	
    	marker_point[i] = new google.maps.LatLng(data.markers[i].lat, data.markers[i].lon);	
	html[i] = '<strong>'+data.markers[i].mname+'</strong><br />'+data.markers[i].address;
	createMarker(marker_point[i], html[i], baseIcon, infoWindow, category);
	}
 
}

Также изменениям подверглась функция createMarker:

function createMarker(point, html, icon, infoWindow, category) {
	 var marker = new google.maps.Marker({
            map: map,
            position: point,
             icon: icon.icon,
            shadow: icon.shadow           
          });
 
  marker.mycategory = category; 
 
  google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
  gmarkers.push(marker);
  return marker;
}

В функциях show и hide мы заменили строки gmarkers[i].show(); на gmarkers[i].setVisible(true); и gmarkers[i].hide(); на gmarkers[i].setVisible(false); соответсвенно.

И строку map.closeInfoWindow(); в функции hide на infowindow.close();

Посмотреть работу примера в действии

В измененных функциях по другому определяются параметры маркера и информационного окна (балуна).

На этом все, мы создали новую версию примера для добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL, с использованием API Google Maps v3

Скачать архив с файлами примера

Организация добавления и вывода данных на карту Google Maps по категориям, используя PHP и MySQL (версия для API Google Maps v3): 36 комментариев

  1. Константин

    У меня проблема: всё делаю как в статье, всё файлы есть, да и в mysql я чувствую себя уверенно.
    Настраиваю запускаю, всё работает, маркер ставиться и в базу добавляет записи, выключил комп, потом включил и ничего не меняя зашёл снова и маркер после нажатия «сохранить» в базу не заноситься, как говориться 0 эмоций.
    Пересмотрел и перепробывал всё, не помогает, переустановил xampp и о чудо заработало, выключил браузер, снова захажу и всё на этом. Опять ничё не пашет!
    Вопрос: Автор что это может быть и что мне делать, он как будто с mysql не сотрудничает, но и ошибок не выдает?

    Ответить ↓
  2. Спасибо за полезный сайт

    Вы не подскажете как можно модифицировать модуль mod_sobi2gcat , универсального каталога Sobi 2, который выводит все маркеры из базы на одну карту, для его совместной работы с API Google Maps версии 3, да и возможно ли такое?

    Модуль состоит из двух файлов:

    mod_sobi2gcat.PHP

    get( ‘showInSobi’, 1 );
    $showAllEntr = $params->get( ‘showAllEntr’ );
    $inSobi = null;
    $catId = sobi2Config::request( $_REQUEST,’catid’,0 );
    $showFromSubcats = $params->get( ‘showFromSubcats’, 1 );
    $useBubbleTemplate = $params->get( ‘useTemplate’, 0 );
    $useCatsCustomMarker= $params->get( ‘useCatsCustomMarker’,0 );
    $catsCustomMarker = $params->get( ‘catsCustomMarker’, null);
    $ignoreTask = $params->get( ‘ignoreTask’ );
    $catsCenterPoints = $params->get( ‘catsCenterPoints’ );
    $customMarker = $params->get( ‘customMarker’, null );
    $markerShadow = $params->get( ‘customMarkerShadow’, null );
    $ignoreTask = explode( «,»,$ignoreTask );
    $bubbleTemplate = str_replace( array( «n», «r», «t» ), null, $params->get( ‘bubbleTemplate’, «{link}» ) );
    $sobiTask = sobi2Config::request( $_REQUEST,’sobi2Task’,null, 2 );
    $letter = sobi2Config::request( $_REQUEST, «letter», null, 2 );
    $tag = sobi2Config::request( $_REQUEST, «tag», null, 2 );
    $sobiTask = $sobiTask ? $sobiTask : ( $letter ? «alphaListing» : ( $tag ? «tagListing» : «category_{$catId}» ) ) ;
    $opt = sobi2Config::request( $_REQUEST,»option», 0, 2 );
    $config =& sobi2Config::getInstance();
    $database =& $config->getDb();

    array_walk( $ignoreTask, «sobi2trim» );
    if( in_array( $sobiTask , $ignoreTask ) ) {
    return false;
    }

    if (!file_exists( _SOBI_FE_PATH.DS.’languages’.DS.$config->sobi2Language.’.php’ )) {
    $config->sobi2Language = ‘english’;
    }
    require_once( _SOBI_FE_PATH.DS.’languages’.DS.$config->sobi2Language.’.php’ );
    if ( file_exists( _SOBI_FE_PATH.DS.’languages’.DS.’default.php’ ) ) {
    include_once( _SOBI_FE_PATH.DS.’languages’.DS.’default.php’ );
    }
    if( $useBubbleTemplate && !function_exists(«sobiGeoCatModTempl») ) {
    sobi2Config::import( «sobi2.class» );
    if( !function_exists( ‘sobi2GeoCatModTempl’ ) )
    {
    function sobi2GeoCatModTempl( $id, $tpl, $href, $title, $sobiTagsLimit )
    {
    $sobi = new sobi2( $id );
    $config =& sobi2Config::getInstance();
    $database = &$config->getDb();
    if( !$sobi->icon && $config->key( «frontpage», «default_ico» ) ) {
    $sobi->icon = $config->key( «frontpage», «default_ico» );
    }
    if( $sobi->icon && file_exists( _SOBI_CMSROOT.$config->imagesFolder.$sobi->icon ) ) {
    $ico = $config->liveSite.$config->imagesFolder.$sobi->icon;
    if(stristr( $ico, «.png» )) {
    $ico = sobi2Config::checkPNGImage( $ico, addslashes( $sobi->title ), «border-style:none;» );
    }
    else {
    $alt = addslashes( $sobi->title );
    $ico = «»;
    }
    }
    else {
    $ico = null;
    }
    if( !$sobi->image && $config->key( «frontpage», «default_img» ) ) {
    $sobi->image = $config->key( «frontpage», «default_img» );
    }
    if( $sobi->image && file_exists( _SOBI_CMSROOT.$config->imagesFolder.$sobi->image ) ) {
    $image = $config->liveSite.$config->imagesFolder.$sobi->image;
    if(stristr( $image, «.png» )) {
    $image = sobi2Config::checkPNGImage( $image, addslashes( $sobi->title ), «border-style:none;» );
    }
    else {
    $alt = addslashes( $sobi->title );
    $image = «»;
    }
    }
    else {
    $image = null;
    }
    if( strstr( $tpl, «{categories}» ) ) {
    sobi2Config::import(«includes|entry.functions»);
    $cats = sobiSpecFunc::getMyCategories( $sobi, true );
    }
    else {
    $cats = null;
    }
    if( strstr( $tpl, «{tags}» ) ) {
    sobi2Config::import(«includes|entry.functions»);
    $sobiTags = sobiSpecFunc::showTags( $sobi->metakey, $sobiTagsLimit );
    }
    else {
    $sobiTags = null;
    }
    static $placeHolder = array();
    $placeHolderReplacement = array();
    $placeHolder[] = «{link}»;
    $placeHolderReplacement[] = «{$title}«;
    $placeHolder[] = «{title}»;
    $placeHolderReplacement[] = addslashes( $sobi->title );
    $placeHolder[] = «{icon}»;
    $placeHolderReplacement[] = $ico;
    $placeHolder[] = «{image}»;
    $placeHolderReplacement[] = $image;
    $placeHolder[] = «{categories}»;
    $placeHolderReplacement[] = str_replace(‘\\\’,»», addslashes( $cats ));
    $placeHolder[] = «{id}»;
    $placeHolderReplacement[] = $sobi->id;
    $placeHolder[] = «{hits}»;
    $placeHolderReplacement[] = $sobi->hits;
    $placeHolder[] = «{publish_up}»;
    $placeHolderReplacement[] = $sobi->publish_up;
    $placeHolder[] = «{publish_down}»;
    $placeHolderReplacement[] = $sobi->publish_down;
    $placeHolder[] = «{last_update}»;
    $placeHolderReplacement[] = $sobi->lastUpdate;
    $placeHolder[] = «{tags}»;
    $placeHolderReplacement[] = str_replace(‘\\\’,»», addslashes( $sobiTags ));
    if( count( $sobi->customFieldsData ) ) {
    foreach ( $sobi->customFieldsData as $field => $data ) {
    if( is_array( $data ) ) {
    $data = implode( «,», $data );
    }
    $tpl = str_replace(‘{‘.$field.’}’, str_replace(‘\\\’,»», addslashes( $data ) ), $tpl );
    }
    }
    $tpl = str_replace( $placeHolder, $placeHolderReplacement, $tpl );
    return $tpl;
    }
    }
    }
    if( $opt == «com_sobi2» ) {
    $inSobi = true;
    if( !$showInSobi ) { //wenn in SOBI aber nur anzeigen wenn nicht in SOBI
    return null;
    }
    }
    if($catId get( «curDisplSidList», array() );
    if (empty( $curSids ) && ( $showAllEntr && ( $catId getGoogleMaps();
    $class = $params->get(‘moduleclass_sfx’);
    $baseAddresse = $params->get(‘baseAddresse’, ‘http://maps.google.com’);
    $width = $params->get(‘width’);
    $height = $params->get(‘height’);
    $mapControl = $params->get(‘MapControl’);
    $mapTypeControl = $params->get(‘MapTypeControl’);
    $overviewMapControl = $params->get(‘OverviewMapControl’,1);
    $doubleClickZoom = $params->get(‘DoubleClickZoom’,1);
    $mapTypeOnStart = $params->get(‘MapTypeOnStart’, ‘G_NORMAL_MAP’);
    $centerPointLat = $params->get(‘centerPointLat’,»0.0″ );
    $centerPointLong = $params->get(‘centerPointLong’, «0.0» );
    $mapsZoom = $params->get(‘MapsZoom’, 1 );
    $hybrid_label = $params->get(‘hybrid_label’, «Labels»);

    if( $catId > 1 ) {
    if( strstr( $catsCenterPoints, «n» ) ) {
    $catsCenterPoints = explode( «n», $catsCenterPoints );
    }
    else {
    if( strstr( $catsCenterPoints, «r» ) ) {
    $catsCenterPoints = explode( «r», $catsCenterPoints );
    }
    }
    if( is_array( $catsCenterPoints ) && !empty( $catsCenterPoints ) ) {
    foreach ( $catsCenterPoints as $point ) {
    $point = trim( $point );
    $point = explode( «:», $point );
    if( trim( $point[0] ) == $catId ) {
    if( ( isset( $point[1] ) && is_numeric( $point[1] ) ) && isset( $point[2] ) && is_numeric( $point[2] ) ) {
    $centerPointLat = floatval( $point[1] );
    $centerPointLong = floatval( $point[2] );
    if( isset( $point[3] ) && is_numeric( $point[3] ) ) {
    $mapsZoom = intval( $point[3] );
    }
    }
    break;
    }
    }
    }
    }
    if( $useCatsCustomMarker ) {
    $catsCustomMarker = strip_tags( $catsCustomMarker );
    if( strstr( $catsCustomMarker, «n» ) ) {
    $customMarkers = explode( «n», $catsCustomMarker );
    }
    if( strstr( $catsCustomMarker, «r» ) ) {
    $customMarkers = explode( «r», $catsCustomMarker );
    }
    $catsCustomMarkers = array();
    if( is_array( $customMarkers ) && !empty( $customMarkers ) ) {
    foreach ($customMarkers as $catMarker ) {
    $position = explode( «:», $catMarker );
    if( isset( $position[0] ) ) {
    $catsCustomMarkers[ $position[0] ] = array( );
    if( isset( $position[1] ) ) {
    $catsCustomMarkers[ $position[0] ][‘marker’] = strip_tags( $position[1] );
    }
    if( isset( $position[2] ) ) {
    $catsCustomMarkers[ $position[0] ][‘shadow’] = strip_tags( $position[2] );
    }
    }
    }
    }
    }
    if( !( is_numeric( $centerPointLat ) ) || !( is_numeric( $centerPointLong ) ) ) {
    $centerPointLat = «0.0»;
    $centerPointLong = «0.0»;
    }

    if( $inSobi || !$showInSobi ) {
    if( $catId > 0 ) {
    $cats = array();
    if( $showFromSubcats ) {
    $config->getChildCats( $catId,$cats );
    $cats = implode( ‘, ‘,$cats );
    }
    else {
    $cats = $catId;
    }
    $query = «SELECT DISTINCT `itemid` FROM `#__sobi2_cat_items_relations` WHERE `catid` IN ({$cats})»;
    $database->setQuery($query);
    $sItems = $database->loadResultArray();
    }
    else {
    $sItems = $curSids;
    }
    }
    else {
    return null;
    }

    if( !( empty( $sItems ) ) ) {
    $sItems = implode(‘, ‘,$sItems);
    $query = «SELECT `data_txt`, `itemid`, `fieldid` FROM `#__sobi2_fields_data` WHERE (`fieldid` = 1 OR `fieldid` = ‘{$config->googleMapsLatField}’ OR `fieldid` = ‘{$config->googleMapsLongField}’) AND `itemid` IN ($sItems)»;
    $database->setQuery($query);
    $dataResArr = $database->loadObjectList();
    $data = array();
    foreach($dataResArr as $dataRes) {
    if($dataRes->fieldid == $config->googleMapsLongField) {
    $data[$dataRes->itemid][‘longitude’] = $dataRes->data_txt;
    }
    else if($dataRes->fieldid == $config->googleMapsLatField) {
    $data[$dataRes->itemid][‘latitude’] = $dataRes->data_txt;
    }

    }
    $now = $config->getTimeAndDate();
    $query = «SELECT `title`, `icon`, `itemid` FROM `#__sobi2_item` WHERE (`itemid` IN ($sItems) AND `published` = 1 AND (`publish_down` > ‘{$now}’ OR `publish_down` = ‘{$config->nullDate}’) )»;
    $database->setQuery($query);
    $itemsResArr = $database->loadObjectList();
    $itemsCats = array();
    $sobiItems = array();
    if( !( empty( $itemsResArr ) ) ) {

    foreach ( $itemsResArr as $itemArr ) {
    $sobiItem = new stdClass();
    $sobiItem->id = $itemArr->itemid;
    $itemsCats[]=$itemArr->itemid;
    $sobiItem->title = $itemArr->title;
    $sobiItem->icon = $itemArr->icon;
    $sobiItem->latitude = null;
    $sobiItem->longitude = null;
    if(isset($data[$sobiItem->id][‘latitude’])) {
    $sobiItem->latitude = $data[$sobiItem->id][‘latitude’];
    }
    if(isset($data[$sobiItem->id][‘longitude’])) {
    $sobiItem->longitude = $data[$sobiItem->id][‘longitude’];
    }
    if($sobiItem->latitude && $sobiItem->longitude) {
    if(is_numeric($sobiItem->longitude) && is_numeric($sobiItem->latitude)) {
    $sobiItems[] = $sobiItem;
    }
    }
    unset($sobiItem);
    }
    if ($useCatsCustomMarker) {
    $itemsCats = implode( ‘,’,$itemsCats);
    $catRels = array();
    $query = «SELECT `catid`,itemid FROM #__sobi2_cat_items_relations WHERE itemid IN ({$itemsCats})»;
    $database->setQuery($query);
    $itemsCats = $database->loadObjectList();
    if( !empty( $itemsCats ) ) {
    foreach ($itemsCats as $dbentry ) {
    $catRels[ $dbentry->itemid ] = $dbentry->catid;
    }
    }
    }
    }
    else {
    return null;
    }
    if(empty($sobiItems)) {
    return null;
    }

    $map_api_version = $config->key(«google_maps», «google_map_apiversion», «2»);

    echo «n «;
    echo ««;
    echo «n «;
    echo «»;
    ?>

    window.onDomReady = DomReady;
    function DomReady(func) { if(document.addEventListener) { document.addEventListener(«DOMContentLoaded», func, false); } else { document.onreadystatechange = function() { readyState(func) } } }
    function readyState(func) { if(document.readyState == «complete») { func(); } }

    <?php
    echo "nt ";
    echo "googleMapsApiKey}» type=»text/javascript»>»;
    echo «nt «;
    echo «nt «;
    echo «//id] ) ) {
    $itemCid = $catRels[$sobiItem->id];
    }
    if( isset( $catsCustomMarkers[$itemCid] ) ) {
    $customCatMarker = isset( $catsCustomMarkers[$itemCid][‘marker’] ) ? $catsCustomMarkers[$itemCid][‘marker’] : null;
    $customCatShadow = isset( $catsCustomMarkers[$itemCid][‘shadow’] ) ? $catsCustomMarkers[$itemCid][‘shadow’] : null;
    if( $customCatMarker && file_exists( _SOBI_CMSROOT.DS.$customCatMarker ) ) {
    list( $cmWidth, $cmHeight ) = getimagesize( _SOBI_CMSROOT.DS.$customCatMarker );
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}] = new Array();»;
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘marker’] = ‘{$customCatMarker}’;»;
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘mw’] = {$cmWidth};»;
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘mh’] = {$cmHeight};»;
    if( $customCatShadow && file_exists( _SOBI_CMSROOT.DS.$customCatShadow ) ) {
    list( $csWidth, $csHeight ) = getimagesize( _SOBI_CMSROOT.DS.$customCatShadow );
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘shadow’] = ‘{$customCatShadow}’;»;
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘sw’] = {$csWidth};»;
    $jsImgArr .= «nttt SCustomMarkers[{$itemCid}][‘sh’] = {$csHeight};»;
    }
    unset( $catsCustomMarkers[$itemCid] );
    }
    //und zum JS array hinzufuegen:
    //aber wie macht man das??
    }
    }
    $href = «index.php?option=com_sobi2&sobi2Task=sobi2Details&sobi2Id={$sobiItem->id}&Itemid={$config->sobi2Itemid}»;
    $href = sobi2Config::sef($href);
    $title = str_replace(«\», «»,$sobiItem->title);
    $title = str_replace(«\», «»,$title);
    if( $useBubbleTemplate ) {
    $bubble = sobi2GeoCatModTempl($sobiItem->id, $bubbleTemplate, $href, $title, $sobiTagsLimit );
    }
    else {
    $bubble = «{$title}«;
    }
    echo «ntttt «;

    //wo kommt $itemCid her? Das hier ist doch ausserhalb der for each schleife!!

    echo «SobiCatOverMap.addOverlay( createSobiMarker( new GLatLng( {$sobiItem->latitude},{$sobiItem->longitude} ), ‘{$bubble}’, {$itemCid} ) );»;
    }
    echo «nttt «;
    echo «} «;
    echo «ntt «;
    echo «} «;
    echo «ntt «;
    echo «function createSobiMarker( point, html, sid ) {«;
    echo «nttt «;
    if( $customMarker && file_exists( _SOBI_CMSROOT.DS.$customMarker ) ) {
    if( $useCatsCustomMarker ) {
    echo «SCustomMarkers = new Array();»;
    echo $jsImgArr;
    echo «nttt «;
    }
    list( $mWidth, $mHeight ) = getimagesize( _SOBI_CMSROOT.DS.$customMarker );
    $gxpoint = $mWidth / 2;
    $gypoint = $mHeight / 2;
    echo «var icon = new GIcon();»;
    echo «nttt «;
    echo «icon.image = «{$config->liveSite}/{$customMarker}»;»;
    echo «nttt «;
    echo «icon.iconSize = new GSize( {$mWidth}, {$mHeight} );»;
    if( $markerShadow && file_exists( _SOBI_CMSROOT.DS.$markerShadow ) ) {
    list( $msWidth, $msHeight ) = getimagesize( _SOBI_CMSROOT.DS.$markerShadow );
    echo «nttt «;
    echo «icon.shadowSize = new GSize( {$msWidth}, {$msHeight} );»;
    echo «nttt «;
    echo «icon.shadow = «{$config->liveSite}/{$markerShadow}»;»;
    echo «nttt «;
    }
    echo «nttt «;
    echo «icon.iconAnchor = new GPoint( 5, 10 );»;
    echo «nttt «;
    echo «icon.infoWindowAnchor = new GPoint( {$gxpoint}, 5 );»;
    if( $useCatsCustomMarker ) {
    echo «nttt «;
    echo «if( SCustomMarkers[sid] != undefined && SCustomMarkers[sid][‘marker’] != undefined && SCustomMarkers[sid][‘marker’] != » ) {«;
    echo «ntttt «;
    echo «icon.image = «{$config->liveSite}/» + SCustomMarkers[sid][‘marker’];»;
    echo «ntttt «;
    echo «icon.iconSize = new GSize( SCustomMarkers[sid][‘mw’], SCustomMarkers[sid][‘mh’] );»;
    echo «ntttt «;
    echo «icon.infoWindowAnchor = new GPoint( ( SCustomMarkers[sid][‘mw’] / 2 ), 5 );»;
    echo «ntttt «;
    echo «if( SCustomMarkers[sid][‘shadow’] != undefined && SCustomMarkers[sid][‘shadow’] != » ) {«;
    echo «nttttt «;
    echo «icon.shadow = «{$config->liveSite}/» + SCustomMarkers[sid][‘shadow’];»;
    echo «nttttt «;
    echo «icon.shadowSize = new GSize( SCustomMarkers[sid][‘sw’], SCustomMarkers[sid][‘sh’] );»;
    echo «ntttt }»;
    echo «nttt }»;
    }
    echo «nttt «;
    echo «var marker = new GMarker( point, icon );»;
    }
    else {
    echo «var marker = new GMarker( point );»;
    }
    echo «nttt «;
    echo «GEvent.addListener(marker, ‘click’, function() {«;
    echo «ntttt «;
    echo «marker.openInfoWindowHtml(»+html+»);»;
    echo «nttt «;
    echo «});»;
    echo «nttt «;
    echo «return marker;»;
    echo «ntt «;
    echo «}»;
    echo «ntt «;
    echo «DomReady(loadSobiCatOverMap);»;
    echo «nt «;
    echo «//]]>»;
    echo «nt «;
    echo «»;
    echo «n»;
    echo «nt «;
    echo «»;
    echo «n «;
    echo «»;
    echo «n «;
    echo ««;
    echo «n «;
    }
    ?>

    И файла mod_sobi2gcat.xml :

    SOBI2 Geo Category Overview
    Sigrid and Radek Suski, Sigsiu.NET
    October 2008
    (C) 2008 Sigsiu.NET — All rights reserved.
    Commercial Licence
    sobi@sigsiu.net
    http://www.Sigsiu.NET
    2.2
    SOBI2 Geo Category Overview Module. This module shows a Google Map with category dependent markers of the SOBI2 entries. Only SOBI2 entries with geo coordinates can be shown in the map. Please read the manual included in the ZIP file for setting up the module.

    mod_sobi2gcat.php
    mod_sobi2gcat.txt

    None
    Small Map Controls
    Large Map Controls

    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    Yes
    No

    Yes
    No

    Normal
    Satellite
    Terrain

    Yes
    No

    Yes
    No

    non-SOBI2 pages
    SOBI2 pages

    Yes
    No

    Yes
    No

    Yes
    No

    Заранее спасибо за Ваш ответ и простите за длинный комент.

    Ответить ↓
  3. Илья

    предлагаю заменить конструкцию

    if(!gmarkers[markersType]) {

    gmarkers[markersType] = 1;

    $.getJSON(«http://localhost/upload.php», {markersType:markersType}, function(data){
    setMarkers(data, markersType);
    });
    }

    на конструкцию вида
    if(!loaded_markers[markersType]) {

    loaded_markers[markersType] = 1;

    $.getJSON(«http://localhost/upload.php», {markersType:markersType}, function(data){
    setMarkers(data, markersType);
    });
    }

    то есть добавить еще один массив для контроля параметров, загружен тип или нет.
    не знаю как на символьных значениях, на цифровых типах, конструкция приведенная автором спотыкается.

    Ответить ↓
  4. Константин

    Спасибо Сергей! Я Разобрался, и всем на будущее, php страниц кодировки utf-8 должна быть без BOM (Byte Order Mark) Иначе запросы не будут работать!
    Для правильной конвертации используйте к примеру Notepad++
    В кодировке выбираем utf-8 без BOM.

    Ответить ↓
  6. Роман

    И ещё как можно отметить все чекбоксы? Точнее отметить не проблема, но при этом не показываются все метки!

    Ответить ↓
  7. vunnu

    чтобы всё работало, в функцию SETMARKERS после VAR HTML = NEW ARRAY() вставте eval(«var data=»+data);

    Ответить ↓
  8. Vinni

    А как быть в случае, если два или более маркера, оказываются в одной точке?
    Например, два бара и один ресторан имеют одинаковые координаты.
    Можно ли сделать так, чтоб при нажатие на эту точку, маркеры расходились «веером» и предоставляли пользователю выбрать нужный?

    Ответить ↓
  9. Николай

    Статья очень нужная, на 5+. Воспользовался. Спасибо.

    Ответить ↓
    1. admin Автор записи

      Могут возникнуть трудности с кодировками, но в принципе работать должно.
      Надо только будет постоянно перекодировать данные при сохранении и выводе из базы.
      Для этого в php-скриптах использовать строку вида

      $mas1[‘NAME’] = iconv(«CP1251», «UTF-8», $mas1[‘NAME’]);

      Производит преобразование кодировки символов строки $mas1[‘NAME’] из начальной кодировки CP1251 в конечную UTF-8.
      Возвращает строку в новой кодировке, или FALSE в случае ошибки.

      Ответить ↓
  11. Михаил

    Добрый день. В авторской редакции все здорово. Решил переписать под себя и наткнулся на на грабли.

    При выборе категорий все подгружается и маркеры появляются. А вот при снятии флажка ничего не происходит.

    Начал проверять функцию Hidi и Show — не передается gmarkers[i].mycategory — пустой.

    Подскажите как быть? может встречались с такой трудностью.
    Строка с категорией:

    Магазины

    Ответить ↓
  12. Sergey

    а как сделать ограничение по маркерам, чтобы можно было добавлять не больше 4-5 мест?

    Ответить ↓
  13. Марат

    Здравствуйте, подскажите пожалуйста почему код не работает в браузерах chrom, exploer и др. только в opere я смог открыть.

    Ответить ↓
    1. admin Автор записи

      У меня в chrom все работает, не отображались значки иконок, т.к. Google закрыл сайт http://labs.google.com откуда они брались. Я положил значки на свой блог и теперь они отображаются

      Ответить ↓
  16. UnoMono

    у меня маркеры не отображаются на карте
    а вот с добавление в бд все ок
    в чем проблеиа не подскажете?

    Ответить ↓
    1. admin Автор записи

      Надо посмотреть скрипт вывода данных на карту upload.php. Каков формат вывода.

      Ответить ↓
  18. UnoMono

    $json = ‘{«markers»:[‘.»n»;

    //Выполняем запрос на выборку координат маркеров соответствующего типа.
    $query = mysql_query(«SELECT * FROM markers WHERE type = ‘$markersType’;»);

    if(mysql_num_rows($query)>0)
    {
    while ($par = mysql_fetch_array($query))
    {
    $json.= «n».'{‘.'»mname»: «‘.$par[‘name’].'»,’;
    $json.= ‘»address»: «‘.$par[‘address’].'»,’;
    $json.= ‘»type»: «‘.$markerNameType.'»,’;
    $json.= ‘»lat»: «‘.$par[‘lat’].'»,’;
    $json.= ‘»lon»: «‘.$par[‘lng’].'»‘;
    $json.= ‘},’;
    }
    $json = substr($json, 0,-1);
    echo $json;
    echo ‘], ‘, «n», ‘»mimg»: «‘,$markerImg.'»,’,»n» ,'»status»: «OK»‘, «n», ‘}’;
    }
    else
    {
    echo ‘{«status»: «false»}’;
    }

    Ответить ↓
  20. andreyb90

    Скачал ваши исходники, заменил файл с настройками базы данных на свои, и все в принципе нормально, карта показывается — информация которую вводит пользователь сохраняется в БД, но когда обновляю страницу, чтоб посмотреть поставленный мной маркер, маркер не выводится на карте, в чем причина, не подскажите? Прямо как у предыдущего комментария UnoMono.

    Ответить ↓
  21. andreyb90

    вопрос снят. в исходнике был неверно прописан путь до upload.php

    Ответить ↓
  22. SergNik

    Можно ли будет вывести рядом меню с названиями объектов (Пытаюсь переделать эту карту http://visit-plus.com/ru/node/1121 на V3, пока не получилось. Надеюсь ваша статая будет полезной. Но у меня из базы данных создаётся XML а из него данные поступают на карту)
    Спасибо за статью.

    Ответить ↓
  23. SerNik

    Спасибо, это то что нужно. (Смотрел на этом сайте но почему-то не заметил этот пример).

    Ответить ↓
  24. Влад

    Привет, подскажите пожалуйста, как вместо checkbox поставить button, чтобы при нажатии на кнопку выводились и прятались маркеры. Спасибо.

    Ответить ↓
  25. Жека

    Помогите решить проблему. В БД заноситься все прекрасно. А вот с выводом меток на карту проблемы, такого плана. Выводятся метки только bar и restaurant, метки cafe никак выводится не хотят, хотя в БД они есть.
    В PHP новичок, сильно не пинать.

    Ответить ↓
  26. Ivan

    Подскажите пожалуйста, как вместо чекбоксов сделать радио? Визуально заменил, но при смене пункта радио, на карте отображаются метки предыдущего радио и текущего. Как сделать чтоб метки предыдущего радио скрывались?

    Ответить ↓
  27. Иван

    А как быть с категориями, у которых value числа? они отображаются но не скрываются((

    Ответить ↓
  28. Валера

    Помогите, никак не получается вывести метки на карту, нажымаю на чек бокс, ничего не выводится, но в БД все записывается, спасайте!!

    Ответить ↓
    1. admin Автор записи

      Нужно проверить какой код выдает файл upload.php. Может быть ответ в формате JSON не правильно формируется.

      Ответить ↓
  29. Александр

    Уважаемый администратор, нам нужна такая карта для туристического сайта, я буду очень благодарен если вы согласитесь сделать нам ее, разумеется за неплохое вознаграждение.

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *