Google Maps API로 마커로가는 길

Question

Google지도 API를 사용하고 있으며 현재 위치를 강조 표시하는 맞춤 마커가 있습니다. 가능하다면 Google지도에서 장소 이름을 클릭 할 때 얻을 수있는 Google지도 길 찾기 대화 상자 (예 : THIS)를 클릭하면 가능합니다. 분량으로 마커를 확대하도록 설정했지만,이 기능을 작동 시키면 분명히 그 기능을 제거 할 것입니다.

미리 도움을 청하십시오. this example에서 처리 방향과

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 

    var location = new google.maps.LatLng(50.871622, -4.131561); 

    var mapOptions = { 
     center: location, 
     zoom: 11, 
     scrollwheel: false 
    }; 

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

    var image = { 
     url: 'img/mapmarker.png', 
    }; 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     icon: image, 
     title: 'Deer Park Dairy' 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(15); 
     map.setCenter(marker.getPosition()); 
     }); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

귀하의 코드 :

여기 내 코드입니다. 원래 기능은 Mike Williams for the Google Maps Javascript API v2 (현재 사용되지 않으며 꺼져 있음)입니다. 그래서이 자바 스크립트가 커뮤니티 교회 자바 스크립트 팀 (http://www.bisphamchurch.org.uk/, http://econym.org.uk/gmap/)

작동 코드에 의해 제공되는 코드를 기반으로합니다 :

var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
var directionsService = new google.maps.DirectionsService(); 
 
// arrays to hold copies of the markers and html used by the side_bar 
 
// because the function closure trick doesnt work there 
 
var gmarkers = []; 
 
var htmls = []; 
 

 
// arrays to hold variants of the info window html with get direction forms open 
 
var to_htmls = []; 
 
var from_htmls = []; 
 

 
// global "map" variable 
 
var map = null; 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 

 

 
function initialize() { 
 

 
    var location = new google.maps.LatLng(50.871622, -4.131561); 
 

 
    var mapOptions = { 
 
    center: location, 
 
    zoom: 11, 
 
    scrollwheel: false 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map"), 
 
    mapOptions); 
 

 
    directionsDisplay.setMap(map); 
 
    directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
    var image = { 
 
    url: 'http://maps.google.com/mapfiles/ms/micons/blue.png' 
 
    }; 
 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    map: map, 
 
    animation: google.maps.Animation.DROP, 
 
    icon: image, 
 
    title: 'Deer Park Dairy' 
 
    }); 
 

 
    var i = gmarkers.length; 
 
    latlng = location; 
 

 
    // The info window version with the "to here" form open 
 
    to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + 
 
    '<br>Start address:<form action="javascript:getDirections()">' + 
 
    '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
 
    '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 
 
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
 
    '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + 
 
    '"/>'; 
 
    // The info window version with the "from here" form open 
 
    from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' + 
 
    '<br>End address:<form action="javascript:getDirections()">' + 
 
    '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + 
 
    '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 
 
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
 
    '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + 
 
    '"/>'; 
 
    // The inactive version of the direction info 
 
    var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>'; 
 
    var contentString = html; 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    map.setZoom(15); 
 
    map.setCenter(marker.getPosition()); 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    // save the info we need to use later for the side_bar 
 
    gmarkers.push(marker); 
 
    htmls[i] = html; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
// ===== request the directions ===== 
 
function getDirections() { 
 
    // ==== Set up the walk and avoid highways options ==== 
 
    var request = {}; 
 
    if (document.getElementById("walk").checked) { 
 
    request.travelMode = google.maps.DirectionsTravelMode.WALKING; 
 
    } else { 
 
    request.travelMode = google.maps.DirectionsTravelMode.DRIVING; 
 
    } 
 

 
    if (document.getElementById("highways").checked) { 
 
    request.avoidHighways = true; 
 
    } 
 
    // ==== set the start and end locations ==== 
 
    var saddr = document.getElementById("saddr").value; 
 
    var daddr = document.getElementById("daddr").value; 
 

 
    request.origin = saddr; 
 
    request.destination = daddr; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else alert("Directions not found:" + status); 
 
    }); 
 
} 
 

 

 
// This function picks up the click and opens the corresponding info window 
 
function myclick(i) { 
 
    google.maps.event.trigger(gmarkers[i], "click"); 
 
} 
 

 

 
// functions that open the directions forms 
 
function tohere(i) { 
 
    // gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
 
    infowindow.setContent(to_htmls[i]); 
 
    infowindow.open(map, gmarkers[i]); 
 
} 
 

 
function fromhere(i) { 
 
    // gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
 
    infowindow.setContent(from_htmls[i]); 
 
    infowindow.open(map, gmarkers[i]); 
 
} 
 

 
// This Javascript is based on code provided by the 
 
// Community Church Javascript Team 
 
// http://www.bisphamchurch.org.uk/ 
 
// http://econym.org.uk/gmap/ 
 
// from the v2 tutorial page at: 
 
// http://econym.org.uk/gmap/basic3.htm

html, 
 
body, 
 
table { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
td, 
 
tr { 
 
    height: 100%; 
 
    width: 50%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="map" style="width:100%; height:100%; border: 2px solid #3872ac;"></div> 
 
    </td> 
 
    <td> 
 
     <div id="directionsPanel"></div> 
 
    </td> 
 
    </tr> 
 
</table>