Add/Remove polylines using Google Maps API using javascript not working

Question

Having some problems with the javascript Google maps API, specifically poly lines.

I have implemented code to mirror the onclick method of https://developers.google.com/maps/documentation/javascript/examples/polyline-remove however the line is not loading, either initially (as desired), or when prompted by the onclick prompts.

I hope that's clear, and thanks in advance.

  </head>
  <body>
 <div id="map" style=
"float:left;width:100%;height:100%;max-width:650px;max-height:500px;margin-left:auto;margin-right:auto;margin-bottom:10px;">
</div>

<div class="panel" id="control_panel" style="width:500px; text-align:left;">
    <div class="panel" style="margin:20px;border-width:2px;">
        <br>
        <b>Start:</b><br>
        <input id="start" type="text" value="Whitechapel"><br>
        <br>
        <b>Please Select Route:</b> 

<!-- Select section that should affect whether polyline is showing or not -->
<select id="waypoints" multiple required>
            <option id="viaRoute" onclick="removeOsterley();"
            value="Direct to event">
                Direct to venue
            </option>

            <option class="waypointoption" id="viaRoute" onclick=
            "removeOsterley();" value="Richmond Shuttle">
                Richmond Bus
            </option>

            <option class="waypointoption" id="viaRoute" onclick=
            "addOsterley();" value="Osterley Shuttle">
                Osterley Bus
            </option>
        </select>
    </div>
</div>




    <script>


function initMap() {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: 51.479242,
            lng: -0.315963
        }
    });

    var richmondImage = 'http://i.imgur.com/oYhtBE0.png';
    var richmondMarker = new google.maps.Marker({
    position: {lat: 51.463243, lng: -0.301353},
    map: map,
    icon: richmondImage
    });

    var osterleyImage = 'http://i.imgur.com/oYhtBE0.png';
    var osterleyMarker = new google.maps.Marker({
    position: {lat: 51.481184, lng: -0.352407},
    map: map,
    icon: osterleyImage
    });

    var marker = new google.maps.Marker({
    position: {lat: 51.479242, lng: -0.315963},
    map: map,
    title: 'Syon Park Hilton Hotel'
    });


    directionsDisplay.setMap(map);

    document.getElementById('waypoints').addEventListener('click', function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });

    // Polyline locations   
    var osterleyPath = [
          {lat:51.481337, lng: -0.352286},
          {lat:51.480669, lng: -0.351814},
          {lat:51.482139, lng: -0.344475},
          {lat:51.482626, lng: -0.336793},
          {lat:51.481397, lng: -0.336085},
          {lat:51.480609, lng: -0.335892},
          {lat:51.478965, lng: -0.334733},
          {lat:51.477521, lng: -0.333467},
          {lat:51.476706, lng: -0.332609},
          {lat:51.476105, lng: -0.331858},
          {lat:51.480368, lng: -0.317718},
          {lat:51.480408, lng: -0.317718},
          {lat:51.479580, lng: -0.317009},
          {lat:51.479304, lng: -0.316736},
          {lat:51.479090, lng: -0.316092},
          {lat:51.479291, lng: -0.316012},
          {lat:51.479357, lng: -0.315754},
          {lat:51.479371, lng: -0.315497}
            ];

    var osterleyBus = new google.maps.Polyline({
    path: osterleyPath,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
     });    

     //Should prompt polyline to load when map does
     addOsterley();

}



 // adds Shuttle Bus to map - onclick function in HTML
         function addOsterley() {
      osterleyBus.setMap(map);
    }

// removes Shuttle Bus to map - onclick function in HTML
    function removeOsterley() {
      osterleyBus.setMap(null);
    }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
        async defer></script>

Answer 1

osterleyBus and map are a local variables, visible in the scope of initMap and currently not visible in removeOsterley / addOsterley .

Create both functions at the end of initMap , then osterleyBus and map will be visible inside the functions

function initMap() {

    /* your code */

    var osterleyBus = new google.maps.Polyline({
    path: osterleyPath,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 2
     });    


    window.addOsterley=function() {
      osterleyBus.setMap(map);
    }

    window.removeOsterley=function() {
      osterleyBus.setMap(null);
    }

    addOsterley();

}

Add/Remove polylines using Google Maps API using javascript not working

Question

1 answers

solution1
0 ACCPTED 2015-08-14 11:37:36

Add/Remove polylines using Google Maps API using javascript not working

Question

1 answers

solution1 0 ACCPTED 2015-08-14 11:37:36

solution1
0 ACCPTED 2015-08-14 11:37:36