CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Bruno Vaz
Bruno Vaz

Reputation: 5025

Google Maps Js API only loads first route

I created a prototype for a project I'm working on, in which the user should create various markers in a map, be able to remove them, calculate a route with the markers, and go back to manage the markers.

I used some code found here in geocodezip.com to calculate the route, and wrote some for the markers, etc.

My problem is that once the user calculates the route, no matter how he edits the markers, when clicking the button to calculate the route, the map only returns the route with the markers that were there on the first time he clicked the button. And the strangest thing is that I checked the coordinates that are being passed to the script that generates the route and the function is sending the markers as it should, but no matter the coordinates sent, it only works correctly on the first time.

Js Fiddle: https://jsfiddle.net/1kmg2u65/2/

The code is really really long so it's all in the Fiddle, but this is what it does: 1. User clicks on map, generate marker, marker goes to an array 2. If user deletes marker, it becomes null in array, to maintain the indexes 3. 'Clean' markers array receives all the markers in order, without the items that are null 4. A function is called with all the markers, this function creates the route 5. To manage the markers, a function reload the map just like it was in the start, but render all the markers that already are in the markers array

Upvotes: 0

Views: 186

Answers (2)

Alfiyum
Alfiyum

Reputation: 411

it works fine if you remove the conditional if (!window.tour) in Tour_startUp function definition.

Upvotes: 1

Matt Greenberg
Matt Greenberg

Reputation: 2330

So here is what I believe is going on.

In the function markMap() you are instantiating new markers that belong to the google map object.

  for (var i = 0; i < markerElements.length; i++){    //Loop para gerar os marcadores
    if (markerElements[i] != null){
      marker = new google.maps.Marker({
        position: markerElements[i].position,
        map: map,
        title: markerElements[i].title
      });
    }
  }

This if fine, but you are not storing that constructed object anywhere. You need to be able to reference that marker to UN-associate it from the map.

At the end of the this for loop you need to add THAT mark to a global array so you can manage it later in the script.

EXAMPLE

// defined at the top of the script
var markerGlobal = [];

  for (var i = 0; i < markerElements.length; i++){    //Loop para gerar os marcadores
    if (markerElements[i] != null){
      marker = new google.maps.Marker({
        position: markerElements[i].position,
        map: map,
        title: markerElements[i].title
      });
      // push marker onto global array
      markerGlobal.push(marker);
    }
  }

Now we can loop through the array and setMap to null

  // un-reference marker from map
  markerGlobal[2].setMap(null);

I see you tried to do this with the removeMarker() function, but it doesn't have the handles to the markers already added to the map.

Some Suggestions

If I was you, I would think about refactoring the code to have one multi dimensional object that holds all the markers, their row info, variables etc.

You could take it one step further and create a constructor function that handles the map and its associated markers. It would be most efficient.

Good luck.

Upvotes: 1

Related Questions