Как использовать JavaScript, чтобы позвонить на карту Google конкретное местоположение

Question

Предположим, у меня есть html, включающий 2 <div>, один - Google Maps, один - список
Конечно, карты <div> отображают карту
список <div> - это местоположение th2список (например, Нью-Йорк, Лондон и т. д.)
У меня есть один вопрос: как я могу щелкнуть по одному месту в списке, и тогда Карты перейдут в указанное место?
Когда при нажатии на элемент списка будетон использует JavaScript для вызова или Как я могу сделать такую ​​функцию, используя Javascript?

Answer 1

Я использую немного jquery для выбора элементов, вызова функции click и получения адреса из атрибута title.

Проверьте этот jsfiddle для справки:

http://jsfiddle.net/X5r8r/263/

<a class="location" title="New York, NY">New York</a>
<a class="location" title="Los Angeles, CA">Los Angeles</a>
<a class="location" title="Washington District of Columbia">Washington</a>

<div id="map-canvas" title="1600 Washington"></div>

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

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0,0);
    var myOptions = {
         zoom: 17,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function codeAddress(element) {
    var address = element.attr('title');
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

$(document).ready(function(){
    $map = $('#map-canvas');

    initialize();
    codeAddress($map);

    $('.location').click(function(){
        $me = $(this);
        codeAddress($me);
    });
});