Google Maps JavaScript API v3

Тема в разделе "JavaScript", создана пользователем Sunday, 16 май 2012.

Модераторы: ZiX
  1. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    767
    Симпатии:
    325
    На разных страницах сайта я получаю разные адреса, вплоть до номера дома. Не могу доехать, как это применить с Перейти по ссылке. Там используется широта и долгота, но нафиг она мне, если мне адрес точный нужно показать на карте?
    Помогите пожалуйста, кто чем может :dead:
     
  2. invader

    invader Серый кардинал в отставке :)

    Moderator
    • Супермодератор
    Регистр.:
    3 апр 2006
    Сообщения:
    2.579
    Симпатии:
    5.748
    Sunday нравится это.
  3. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    767
    Симпатии:
    325
    Ну в том то и дело, что практически...
    На старом API я с горем пополам сделал работающую карту, а здесь не могу догнать, как её соорудить. Вот у меня старый код, который работает на API 2:
    Код:
    <script type="text/javascript">
        var map = null;
        var geocoder = null;
            var address = 'тут получаемый адрес из базы';
            var info = 'текстовая информация';
    function initialize()
    { 
            if (GBrowserIsCompatible())
            {
                map = new GMap2(document.getElementById("map_canvas"));
                geocoder = new GClientGeocoder();
                map.addControl(new GSmallMapControl());
                map.addControl(new GMapTypeControl());
                geocoder.getLatLng(address,
                function(point) {
                    if (point) {
                        map.setCenter(point, 16);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(info);
                   }
                } );
            }
    } 
    </script>
    
    с этим кодом выводится маркер с информационным окном
     
  4. invader

    invader Серый кардинал в отставке :)

    Moderator
    • Супермодератор
    Регистр.:
    3 апр 2006
    Сообщения:
    2.579
    Симпатии:
    5.748
    Мда.... такие трудности :)
    Держите готовый код.
    HTML:
    <!--GOOGLE MAP LOAD-->
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Карта</title>
    </head>
    <body>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
    function CustomMarker(latlng,  map) {
        this.latlng_ = latlng;
        this.setMap(map);
      }
      CustomMarker.prototype = new google.maps.OverlayView();
      CustomMarker.prototype.draw = function() {
        var me = this;
        var div = this.div_;
        if (!div) {
          div = this.div_ = document.createElement('DIV');
          div.style.border = "none";
          div.style.position = "absolute";
          div.style.paddingLeft = "0px";
          div.style.cursor = 'pointer';
          var img = document.createElement("img");
          img.src = "http://google-maps-icons.googlecode.com/files/tickmark1.png";//иконка балуна. куча иконок здесь: http://code.google.com/p/google-maps-icons/
          div.appendChild(img);
          google.maps.event.addDomListener(div, "click", function(event) {
            google.maps.event.trigger(me, "click");
          });
          var panes = this.getPanes();
          panes.overlayImage.appendChild(div);
        }
        var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
        if (point) {
          div.style.left = point.x + 'px';
          div.style.top = point.y + 'px';
        }
      };
      CustomMarker.prototype.remove = function() {
        if (this.div_) {
          this.div_.parentNode.removeChild(this.div_);
          this.div_ = null;
        }
      };
      CustomMarker.prototype.getPosition = function() {
      return this.latlng_;
      };
      var map;
      var overlay;
      function initialize() {
    var opts = {
    zoom: 8,//масштаб карты
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), opts);
    var geocoder = new google.maps.Geocoder();
    //вместо Россия,Москва,Петровка 38 вести нужный адрес
    geocoder.geocode( { 'address': 'Россия,Москва,Петровка 38'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    overlay = new CustomMarker(map.getCenter(), map);
    var iw = new google.maps.InfoWindow({content: "Тут описание. Можно использовать HTML код", pixelOffset: new google.maps.Size(5,0)});
    iw.open(map, overlay);
    google.maps.event.addListener(overlay, "click", function() {
    iw.open(map, overlay);
    });
    }
    });
      }
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="width:640px; height:350px;"></div>
    </div>
    </div>
    </body>
    </html>
    <!--GOOGLE MAP LOAD END-->
     
    Sunday нравится это.
  5. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    767
    Симпатии:
    325
    Блин, только сейчас заметил, что адрес не верно на карте выводится. Я отдаю скрипту Киев, а выводится Днепр o_O
     
  6. invader

    invader Серый кардинал в отставке :)

    Moderator
    • Супермодератор
    Регистр.:
    3 апр 2006
    Сообщения:
    2.579
    Симпатии:
    5.748
    На карте будет выводится то, что задано в переменной address
    Ни больше, ни меньше.
    Проверить здесь, набрав в строке ваш полный адрес:
    Перейти по ссылке
    Хотя выданный код можно запустить и локально, скопировав в HTML файл.
    Усё робить :)