CODEWITHSUNDEEP
google-maps-api-3polyline
RHC1
RHC1

Reputation: 50

Draw Polyline from Marker on click Google Maps API v3

This is a follow-up to a post I made a few days ago, in attempt to go at my challenge in a new direction. My goal is when I click on a marker, I would like the origin lat/lng of my polyline to be the same lat/lng as that marker. The trick that I am running into is where to put the line creation in my for loop of my markers where the on click exists so that the line will use the coordinates of the marker, verse the declared. Since I declare my lat/lng variables outside of this function, the line defaults to their values: var oLat = 10.1 var oLng = 22.1rather than the values inside my for loop. Here is my current for loop:

for (var i in points) {
var p = points[i];
var latlng = new google.maps.LatLng(p[1], p[2]);

var marker = new google.maps.Marker({
    position: latlng,
    icon: points[i][3],
    zIndex: p[5],
    title: p[0]     
});

overviewMarkers.push(marker);


google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(points[i][6] + '<div id="infopanel">'+
  '<input onclick="addLine();" type=button value="Show Routes">'+
  '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
      infowindow.open(map, marker)
     oLat = parseFloat(this.position.lat().toFixed(4))
     oLng = parseFloat(this.position.lng().toFixed(4))
        }      
    })(marker, i) );        
}//end for loop

I have attempted placing my line code (below) after the oLng = parseFloat(this.position.lng().toFixed(4)) but then my line wont draw. If I keep my line code outside of the entire function, it will draw with the default values. Line creation code (I added an alert just to confirm that my var would capture the on-click value):

var arrayLine=[]
var originPoint = [new google.maps.LatLng(oLat,oLng)];
var destPoint = [new google.maps.LatLng(51.9279723,4.4904063),
                 new google.maps.LatLng(40.136482, -73.831299),
                 new google.maps.LatLng(34.0204989,-118.4117325)                 
                ];
var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for (var d in destPoint) {
    var t = destPoint[d];

  var linePath = new google.maps.Polyline({
    path: [originPoint[0],[t][0]], 
    strokeColor: '#4A484D',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
      icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]

  });
   arrayLine.push(linePath)

function setLines(map) {
for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
    }
   }
  }
function addLine() {
setLines(map);
alert(parseFloat(oLat));
}

I have attempted to look at the complex polyine example that google provides, but it seems a little more simplified then what I am attempting to do.

Upvotes: 1

Views: 5089

Answers (1)

geocodezip
geocodezip

Reputation: 161334

  1. you need to create the polyline in the marker click listener (where the marker is accessible and you can get its position).
  2. use documented methods (.getPosition(), not undocumented properties .position)
for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
        position: latlng,
        icon: points[i][3],
        zIndex: p[5],
        map: map,
        title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            var originPoint = this.getPosition();
            var oLat = parseFloat(this.getPosition().lat().toFixed(4));
            var oLng = parseFloat(this.getPosition().lng().toFixed(4));
            for (var d in destPoint) {
                var t = destPoint[d];

                var linePath = new google.maps.Polyline({
                    path: [originPoint, [t][0]],
                    strokeColor: '#4A484D',
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    geodesic: true,
                    icons: [{
                        icon: lineSymbol,
                        offset: '100%',
                        repeat: '60px'
                    }],
                    map: map

                });
                arrayLine.push(linePath);
            }
            infowindow.setContent(points[i][6] + '<div id="infopanel">' +
                '<input onclick="addLine();" type=button value="Show Routes">' +
                '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
            infowindow.open(map, marker);
        };
    })(marker, i));
} //end for loop

working fiddle

code snippet:

var map;
var arrayLine = [];
var overviewMarkers = [];
var oLat, oLng;

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 180);
  var mapOptions = {
    zoom: 1,
    center: myLatlng
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var points = [
    ['Karachi, Pakistan', 25.0111453, 67.0647043, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png', 'Overview', 1, '<h4>Sample Text</h4'],
    ['Bangkok, Thailand', 13.7246005, 100.6331108, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png',
      'Overview', 1, '<h4>Sample Text</h4>'
    ],
    ['Rotterdam, Netherlands', 51.9279723, 4.4904063, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['New York, NY, USA', 40.7056308, -73.9780035, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['Memphis, TN, USA', 35.129186, -89.9696395, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>']
  ];

  var infowindow = new google.maps.InfoWindow();

  var originPoint = [];
  // Creates markers  
  for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
      position: latlng,
      icon: points[i][3],
      zIndex: p[5],
      map: map,
      title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var originPoint = this.getPosition();
        var oLat = parseFloat(this.getPosition().lat().toFixed(4));
        var oLng = parseFloat(this.getPosition().lng().toFixed(4));
        for (var d in destPoint) {
          var t = destPoint[d];

          var linePath = new google.maps.Polyline({
            path: [originPoint, [t][0]],
            strokeColor: '#4A484D',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
              icon: lineSymbol,
              offset: '100%',
              repeat: '60px'
            }],
            map: map

          });
          arrayLine.push(linePath);
        }
        infowindow.setContent(points[i][6] + '<div id="infopanel">' +
          '<input onclick="addLine();" type=button value="Show Routes">' +
          '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
        infowindow.open(map, marker);
      };
    })(marker, i));
  } //end for loop  
}
var arrayLine = [];
var originPoint = [new google.maps.LatLng(oLat, oLng)];
var destPoint = [new google.maps.LatLng(51.9279723, 4.4904063),
  new google.maps.LatLng(40.136482, -73.831299),
  new google.maps.LatLng(34.0204989, -118.4117325)
];
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};

function addLine() {
  setLines(map);
  // alert(parseFloat(oLat));
}
google.maps.event.addDomListener(window, 'load', initialize);

function setLines(map) {
  for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
  }
}

function removeLine() {
  setLines(null);
}
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#infopanel {
  width: 200px;
  height: 60px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
  <input onclick="showFactoryMarkers();" type=button value="Show Factories">
  <input onclick="showCFSMarkers();" type=button value="Show CFS">
  <input onclick="showPortMarkers();" type=button value="Show Ports">
  <input onclick="hideMarkers();" type=button value="Hide All">
</div>
<div id="map-canvas"></div>

Upvotes: 1

Related Questions