WordPress.org

Forums

MapPress Easy Google Maps
[resolved] Can you get directions from/to (3 posts)

  1. Marteens
    Member
    Posted 1 year ago #

    Hi!

    I just installed the free version of the MapPress plugin, and it seems nice. I was wondering if it's possible to make a map with directions on it. I wish to explain how to get from A to B, so that's what I need a map for. If possible, how do I do it?

    Thanks :)

    https://wordpress.org/plugins/mappress-google-maps-for-wordpress/

  2. Marteens
    Member
    Posted 1 year ago #

    I am talking about something like the map on this page.

    I made that with this code:

    <div id="map-canvas" style="float:left;width:100%; height:400px"></div><div id="directionsPanel" style="float:left;width:100%;height 100%"> <p>Total Distance: <span id="total"></span></p> </div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    
    var rendererOptions = {
      draggable: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
    var directionsService = new google.maps.DirectionsService();
    var map;
    
    var australia = new google.maps.LatLng(-25.274398, 133.775136);
    
    function initialize() {
    
      var mapOptions = {
        zoom: 7,
        center: australia
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directionsPanel'));
    
      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
      });
    
      calcRoute();
    }
    
    function calcRoute() {
    
      var request = {
        origin: 'Sydney, NSW',
        destination: 'Sydney, NSW',
        waypoints:[{location: 'Bourke, NSW'}, {location: 'Broken Hill, NSW'}],
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }
    
    function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.0;
      document.getElementById('total').innerHTML = total + ' km';
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    </script>

    which is based on the code from this site.

    It doesn't work 100% though, so I was hoping to find a better solution in your plugin. I mean, my map works, but the zoom control and the little yellow man (street view) on the left side of the map is behaving wierd and not showing properly. And the same for the "x" to get out of street view. Besides, the street view isn't working at all in Firefox for some reason. Anyway, I'm looking for a better way to do this :)

  3. Marteens
    Member
    Posted 1 year ago #

    I ended up with the WP Flexible Map plugin. That's easy and it works great. Here is a map I made with that plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • MapPress Easy Google Maps
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic