I'm creating a page that shows a world map with markers placed at LatLng coordinates and I'm trying to link them with Polylines. However, I don't want each of them to be linked together. For example, given a set {A,B,C,D,E,F}, the links are A->B, B->C and C->D, also A->E.
When I try to do D->F, D->E magically appears even when I didn't specify it.
Initially I tried with the default path array, but it didn't work so I used another array called coordinates. The first few polylines were drawn from one specific point and it didn't have problems, but when I try to draw from another point to another, it works but polylines that I didn't specify also appeared.
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
// Save the positions' history
var path = [];
navigator.geolocation.watchPosition(function(position) {
// Save the current position
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
// Create the map
var myOptions = {
zoom : 3,
center : path[0],
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
path.push(new google.maps.LatLng(2.745537, 101.707316)); //mas
path.push(new google.maps.LatLng(37.460353, 126.440674)); //kor
path.push(new google.maps.LatLng(34.789594, 135.438084)); //jpn
path.push(new google.maps.LatLng(-37.665357, 144.840642)); //aus
path.push(new google.maps.LatLng(55.410343, 37.902312)); //rus
path.push(new google.maps.LatLng(40.085148, 116.552407)); //chi
path.push(new google.maps.LatLng(-6.127211, 106.653684)); //ind
path.push(new google.maps.LatLng(1.364860, 103.991594)); //sin
path.push(new google.maps.LatLng(40.760284, -73.772304)); //usa
path.push(new google.maps.LatLng(53.358796, -2.272773)); //uk
path.push(new google.maps.LatLng(40.498275, -3.567727)); //spa
// Create the array that will be used to fit the view to the points range and
// place the markers to the polyline's points
var latLngBounds = new google.maps.LatLngBounds();
for(var i = 0; i < path.length; i++) {
latLngBounds.extend(path[i]);
// Place the marker
new google.maps.Marker({
map: map,
position: path[i],
title: "Point " + (i + 1)
});
}
var coordinates = [
//mas
{lat:2.745537, lng:101.707316}, {lat:37.460353,lng:126.440674}, //to kor
{lat:2.745537, lng:101.707316}, {lat:34.789594,lng:135.438084}, //to jpn
{lat:2.745537, lng:101.707316}, {lat:-37.665357,lng:144.840642}, //to aus
{lat:2.745537, lng:101.707316}, {lat:40.085148,lng:116.552407}, //to chi
{lat:2.745537, lng:101.707316}, {lat:-6.127211,lng:106.653684}, //to ind
{lat:2.745537, lng:101.707316}, {lat:1.364860,lng:103.991594}, //to sin
{lat:2.745537, lng:101.707316}, {lat:40.498275,lng:-3.567727}, //to spa
//kor
{lat:36.460353, lng:126.440674}, {lat:34.789594,lng:135.438084}, //to jpn
{lat:36.460353, lng:126.440674}, {lat:55.410343,lng:37.902312}, //to rus
{lat:36.460353, lng:126.440674}, {lat:40.085148,lng:116.552407}, //to chi
];
// Creates the polyline object
var polyline = new google.maps.Polyline({
map: map,
path: coordinates,
strokeColor: '#0000FF',
strokeOpacity: 0.7,
strokeWeight: 1,
geodesic: true
});
// Fit the bounds of the generated points
//map.fitBounds(latLngBounds);
polyline.setMap(map);
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
https://i.stack.imgur.com/fzyEf.jpg
I expect the point South Korea to only connects to Moscow, China, Japan and Malaysia, not Spain.
