Plotting multiple polylines on Google Maps

slowmotionfred

I'm new to programming with Javascript and Google Maps so this may be a pretty simple question. I would like to plot multiple polylines on a Google Map. I have code written that draws the lines but they are all connected instead of discrete. I've tried implementing several solutions I found here but either the map doesn't display at all or else it does and the polylines are all still connected. See the attached image of the flawed result.Map of multiple polylines

Does anyone have any suggestions to correct this problem? Thanks for your help. Code below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
  height: 90%;
  margin: 5px;
  padding: 1px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3"
        type="text/javascript">
</script>

<script>

var map;
var trackLats = [ [ [  14.735, -20.595 ], [ -13.913,   8.188 ] ],
                  [ [ -14.788,  20.562 ], [  13.879,  -8.230 ] ],
                  [ [  14.784, -20.546 ], [ -13.818,   8.288 ] ],
                  [ [ -14.837,  20.513 ], [  13.784,  -8.329 ] ],
                  [ [  14.892, -20.439 ], [ -13.758,   8.350 ] ] ];
var trackLons = [ [ [   76.480,   90.967 ], [   68.509,   98.386 ] ],
                  [ [ -115.254, -100.759 ], [ -123.226,  -93.342 ] ],
                  [ [   53.036,   67.521 ], [   45.065,   74.937 ] ],
                  [ [ -138.698, -124.204 ], [ -146.669, -116.791 ] ],
                  [ [   29.567,   44.049 ], [   21.570,   51.438 ] ] ];

function initialize()
{

  var mapCenter = new google.maps.LatLng(0.0, 139.0);
  var mapOptions =
      {
        zoom: 2,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.HYBRID
      };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  for ( i=0 ; i<5 ; i++ )
  {
    for ( j=0 ; j<2 ; j++ )
    {
      for ( k=0 ; k<2 ; k++ )
      {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
                                                trackLons[i][j][k]));
      }

      var trackLine = new google.maps.Polyline(
      {
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>
geocodezip

I think you want this: working fiddle

Each pair of coordinates defines a single line segment. After drawing each line segment, start a new array of points and a new google.maps.Polyline.

working code snippet:

var map;
var trackLine = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
  ]
];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {

  var mapCenter = new google.maps.LatLng(0.0, 139.0);
  var mapOptions = {
    zoom: 1,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }

      trackLine.push(new google.maps.Polyline({
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.4,
        strokeWeight: 3
      }));

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 90%;
  margin: 5px;
  padding: 1px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Google Maps API DeletedApiProjectMapError

分類Dev

MapView google maps NullPointerException?

分類Dev

Google Maps API + Google Maps Engine / My Maps

分類Dev

Plotting multiple graphs depending on column value with gnuplot

分類Dev

Can I pass multiple travel modes when using The Google Maps Distance Matrix API

分類Dev

Fit Bounds for Multiple Polygons google Maps

分類Dev

Plotting multiple lines in Tableau

分類Dev

Plotting multiple lines in Tableau

分類Dev

Can Google Maps API calculate route along multiple locations or journey legs?

分類Dev

Legend not showing when plotting multiple seaborn plots

分類Dev

How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click

分類Dev

R: Plotting with ggplot using multiple lines

分類Dev

Google Maps Crash GMSOverlayDisplayLayer

分類Dev

Plotting precision recall curve for multiple algorithms

分類Dev

Issues with Google Maps Javascript API, Marker and Polylines NOT SHOWING together on a React.js App

分類Dev

Plotting multiple bars into a chart using MatPlotLib

分類Dev

How to define figsize when plotting tree maps with squarify

分類Dev

Google Maps: Transparent Polygons

分類Dev

Fade In circles in Google Maps

分類Dev

Need Google Maps to open Multiple Marker Popups with Fancybox

分類Dev

Hover on FusionTablesLayer in google maps

分類Dev

Poor rendering time when plotting large shape files on Google Maps

分類Dev

Google Maps Api - multiple items in infowindow

分類Dev

Plotting multiple graphs in a single window by using matlab

分類Dev

Removing multiple circles google maps api

分類Dev

Google Maps multiple maps displayed instead of one

分類Dev

Adding Multiple Markers in real time google maps v2 android

分類Dev

Insert multiple location read from file in Google Maps API

分類Dev

Plotting multiple gridlines and give seperate labels in Mathematica

Related 関連記事

  1. 1

    Google Maps API DeletedApiProjectMapError

  2. 2

    MapView google maps NullPointerException?

  3. 3

    Google Maps API + Google Maps Engine / My Maps

  4. 4

    Plotting multiple graphs depending on column value with gnuplot

  5. 5

    Can I pass multiple travel modes when using The Google Maps Distance Matrix API

  6. 6

    Fit Bounds for Multiple Polygons google Maps

  7. 7

    Plotting multiple lines in Tableau

  8. 8

    Plotting multiple lines in Tableau

  9. 9

    Can Google Maps API calculate route along multiple locations or journey legs?

  10. 10

    Legend not showing when plotting multiple seaborn plots

  11. 11

    How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click

  12. 12

    R: Plotting with ggplot using multiple lines

  13. 13

    Google Maps Crash GMSOverlayDisplayLayer

  14. 14

    Plotting precision recall curve for multiple algorithms

  15. 15

    Issues with Google Maps Javascript API, Marker and Polylines NOT SHOWING together on a React.js App

  16. 16

    Plotting multiple bars into a chart using MatPlotLib

  17. 17

    How to define figsize when plotting tree maps with squarify

  18. 18

    Google Maps: Transparent Polygons

  19. 19

    Fade In circles in Google Maps

  20. 20

    Need Google Maps to open Multiple Marker Popups with Fancybox

  21. 21

    Hover on FusionTablesLayer in google maps

  22. 22

    Poor rendering time when plotting large shape files on Google Maps

  23. 23

    Google Maps Api - multiple items in infowindow

  24. 24

    Plotting multiple graphs in a single window by using matlab

  25. 25

    Removing multiple circles google maps api

  26. 26

    Google Maps multiple maps displayed instead of one

  27. 27

    Adding Multiple Markers in real time google maps v2 android

  28. 28

    Insert multiple location read from file in Google Maps API

  29. 29

    Plotting multiple gridlines and give seperate labels in Mathematica

ホットタグ

アーカイブ