• Resolved Marteens

    (@marteens)


    Hi.

    In the attempt to get this map from Google Maps into a page on my site, I have some minor problems.

    I used the plugin called Insert Html Snippet, and inserted 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>

    That gives me a map with directions and a road desription. 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 also the street view isn’t working. When I drag the yellow man (or the white field where the yellow man normally is) into the a street, there isn’t coming any image. What am I doing wrong?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Marteens

    (@marteens)

    I just realised that the street view is working in both Chrome and IE, but not in Firefox. But the buttons are behaving strangely in all browsers as explained over. Also the “x” button to get out of street view is strange.

    Thread Starter Marteens

    (@marteens)

    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Symbols not showing and street view not working – Google maps’ is closed to new replies.