[HELP]Google Maps, свои маркеры с описанием, как делать?

pavloff · 7 Июл 2009

Вообщем ситуация такая, есть у меня сайтик где надо на карте сделать 20 адресов, сделал сначала гугловским способом - Моя карта с ихними маркерами, не понравились, захотел использовать свои маркеры вместо ихних пилюль красных, покопался в API, дошел до момента добавления описания (при клике на маркер), но не знаю как сделать

PHP:

<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(59.913103,30.32817), 10);
 

// sozdanie malenkogo znachka markera
var tinyIcon = new GIcon();
tinyIcon.image = "marker.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(32, 32);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);

// zadanie literala objekta GMarkerOptions 
markerOptions = { icon:tinyIcon };


// dobavlenie na kartu markerov

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

<!-- Marker1 -->

var point = new GLatLng(59.8360594,30.3182192);


map.addOverlay(new GMarker(point, markerOptions));


<!-- Marker 2 -->


var point = new GLatLng(59.9360594,30.3182192);


map.addOverlay(new GMarker(point, markerOptions));



}
} 
</script>

Карта отображается, маркеры - мои иконки, все отлично, только не знаю куда добавить описание для каждого маркера, что бы при клике выводилось то что я напишу

polyetilen · 7 Июл 2009

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>пример с маркерами</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=ru&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">



    function initialize() {
      if (GBrowserIsCompatible()) {
      
          //объект маркеров
          var markers = {};
        
        //создаётся карта для div map_canvas
        var map = new GMap2(document.getElementById("map"));
        //карта центрируется
        map.setCenter(new GLatLng(59.913103,30.32817), 10);
        //запуск интерфейса, язык указывается в ссылке, русский hl=ru
        map.setUIToDefault();
        
        //функция создаёт маркер, point - точка на карте, i - номер маркера, icon_image - иконка маркера
        function create_marker(point, i, icon_image, info){
            //иконка окончание только .png
            var icon = new GIcon();
            //иконка
            icon.image = icon_image;
            //размер иконки
            icon.iconSize = new GSize(50,50);
            //точка цепления иконки от точки на карте (сейчас середина)
            icon.iconAnchor = new GPoint(25, 25);
            //тень иконки
            icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
            icon.shadowSize = new GSize(50, 50);
            //точка цепления инфоокна
            icon.infoWindowAnchor = new GPoint(25, 25);
            //тень инфо окна
            icon.infoShadowAnchor = new GPoint(25, 25);
            //опции маркера, например перетаскиваюёийся маркер draggable:true
            markerOptions = { icon:icon, draggable:true};
            //объект маркер
            marker = new GMarker(point, markerOptions);
            //дополнительные данные маркера
            marker.nomer_markera = i;
            marker.info = info;
            return marker;
        }

        //границы карты
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        //случайно генерируем точки на карте
        for (var i = 0; i < 10; i++) {
            //точка
            var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
            GLog.write("точка:"+point);
            //маркер
            markers[i] = create_marker(point, i, "http://www.nulled.cc/nulled_v4/misc/skin/logo.png", 'Зануллено №'+i+'<br><a target="_blank" href="http://www.nulled.cc">подробнее</a>');
            GLog.write("маркер:"+i);
            //событие для маркера например клик (click, mouseover, dblclick и другие) на маркере запускает инфо окно
            GEvent.addListener(markers[i], "click", function() {
                this.openInfoWindowHtml(this.info);
                GLog.write("открылось инфоокно маркера №:"+this.nomer_markera);
            });
            //показываем маркер на карте
            map.addOverlay(markers[i]);
        }
        
    
    
    //или например загрузки внешних данных для инфо окна
    markers[20] = create_marker(new GLatLng(59.913103,30.32817), 20, "http://www.nulled.cc/nulled_v4/misc/skin/logo.png", '');

    GEvent.addListener(markers[20], "click", function() {
        //файл внешние данних text.txt, ссылка на данные должна быть на том же домене где запускается скрипт
        GDownloadUrl("text.txt", function(data) {
            markers[20].openInfoWindowHtml(data);
        });
    });
    
    map.addOverlay(markers[20]);
        
        
        
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

[HELP]Google Maps, свои маркеры с описанием, как делать?

pavloff

Профессор

polyetilen

Заблокирован