使用Google Maps API标记的方向

Question

So I'm using the Google Maps API and currently I have a custom marker that highlights the location. What I would like to do, if possible, is be able to click it and have it bring up the google maps directions dialog (eg THIS ) that you get when clicking on a place name normally on google maps. At the minute I've just set it to zoom in on the marker, but obviously I'll just get rid of that function if I can get this to work.

Thanks in advance for any help.

Here is my code:

<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

Your code with the directions handling from this example . The original functionality was written by Mike Williams for the Google Maps Javascript API v2 (which is now deprecated and turned off). So this Javascript is based on code provided by the Community Church Javascript Team ( http://www.bisphamchurch.org.uk/ , http://econym.org.uk/gmap/ )

Working code snippet:

 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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> 

Answer 2

Google Maps API has been updated and now, when you get your bearing updates, you can do the following:

val position = LatLng(latitude, longitude)
map.addMarker(MarkerOptions().position(position).title(title).icon(icon).flat(true).
              rotation(heading.toFloat()))

Don't forget to flat your marker. It ensures the marker is north aligned so that the bearing will work correctly even if the user rotates the map.