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

Тема в разделе "Как сделать...", создана пользователем pavloff, 7 июл 2009.

Статус темы:
Закрыта.
  1. pavloff

    pavloff

    Регистр.:
    5 авг 2007
    Сообщения:
    265
    Симпатии:
    39
    Вообщем ситуация такая, есть у меня сайтик где надо на карте сделать 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(3232);
    tinyIcon.shadowSize = new GSize(2220);
    tinyIcon.iconAnchor = new GPoint(620);
    tinyIcon.infoWindowAnchor = new GPoint(51);

    // 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(pointmarkerOptions));


    <!-- 
    Marker 2 -->


    var 
    point = new GLatLng(59.9360594,30.3182192);


    map.addOverlay(new GMarker(pointmarkerOptions));



    }

    </script>

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

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

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    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, "https://www.nulled.cc/nulled_v4/misc/skin/logo.png", 'Зануллено №'+i+'<br><a target="_blank" href="https://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, "https://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>
    
    
    Перейти по ссылке
    Перейти по ссылке
     
    pavloff нравится это.
Статус темы:
Закрыта.