Нужно добавить ссылку "Как добраться сюда" в информационном окне - PullRequest
Новая
       1

Нужно добавить ссылку "Как добраться сюда" в информационном окне

2 голосов
/ 20 марта 2012

Я новичок в Google Maps и Javascript, но мне нужно решить эту проблему!У меня есть файл .html с картой Google местоположения нашего клиента, загруженной в div map_canvas.Благодаря учебным пособиям я смог понять, как написать достаточно Javascript для работы карты, иметь собственный маркер и информационное окно, которое появляется при нажатии на него.Единственная оставшаяся часть состоит в том, чтобы внутри информационного окна была ссылка, в которой говорилось бы: «Как добраться до нас», и есть текстовое поле, которое пользователь может ввести по своему начальному адресу.Я вижу много документации, чтобы помочь мне написать свой собственный код на сайте разработчика Google, но я недостаточно продвинут, чтобы сделать это.Может кто-нибудь помочь мне понять, как это сделать?Вот мой Javascript: 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
    var latlng = new google.maps.LatLng(33.929011, -84.361);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.929011, -84.361),
        map: map,
        title: 'Atlanta/Sandy Springs',
        clickable: true,
        icon: 'images/mapmarker.png'
    });

    var infowindow = new google.maps.InfoWindow({
      content: 'client address'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });

}
</script>

1 Ответ

4 голосов
/ 20 марта 2012

Я добавил несколько штук. Во-первых, вам нужна более качественная HTML-форма внутри информационного окна, так как я вставляю только основные части, и она не будет реагировать при нажатии Enter.

Затем я добавил геокодер, потому что Служба указаний не будет принимать «удобочитаемые» адреса, только координаты широты. Геокодер преобразует два. Наконец, добавлены направления Сервис и Дисплей. Текст с указаниями идет в div (directionsPanel).

См. рабочую скрипку или используйте этот код: 

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
  html, body {
      margin: 0;
      padding: 0;
      height: 100%
  }
  #map_canvas {
      margin: 0;
      padding: 0;
      width: 50%;
      height: 100%
  }
  #directionsPanel {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 50%
  }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var geocoder;
var directionsService;
var directionsDisplay;

function initialize() {
    var latlng = new google.maps.LatLng(33.929011, -84.361);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.929011, -84.361),
        map: map,
        title: 'Atlanta/Sandy Springs',
        clickable: true
    });

    var infowindow = new google.maps.InfoWindow({
        content: "Your address: <input id='clientAddress' type='text'>"+
                "<input type='button' onClick=getDir() value='Go!'>"
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
    geocoder = new google.maps.Geocoder();
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function getDir() {
    geocoder.geocode({
        'address': document.getElementById('clientAddress').value
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var origin = results[0].geometry.location;
            var destination = new google.maps.LatLng(33.929011, -84.361);

            var request = {
                origin: origin,
                destination: destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        } else {
            document.getElementById('clientAddress').value =
                "Directions cannot be computed at this time.";
        }
    });
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
    <div id="directionsPanel"></div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...