How to draw a line between two point in Google map?

mySun Published at Dev

mySun

I need draw a curved line between two point in Google map.

How to draw with jQuery?

This code is for One point. How to change for 2 point and draw a curved line between two point in Google map?

My code is:

if ($('#map-canvas-airport').length) {
var map,
    service;

jQuery(function($) {
    $(document).ready(function() {
        var lat = $('#airport-map').data('google-lat');
        var lng = $('#airport-map').data('google-lng');
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        map = new google.maps.Map(document.getElementById("map-canvas-airport"), myOptions);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        marker.setMap(map);


        $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latlng);
        });
    });
});
}

In HTML:

<div class="tab-pane fade" id="airport-map" data-google-lat="{{ $iata -> lat }}" data-google-lng="{{ $iata -> lng }}">
   <div id="map-canvas-airport" style="width:100%; height:500px;"></div>
</div>

TedMeftah

From the google docs:

var map = new google.maps.Map(...); // init the map
var lineCoordinates = [
  {lat: 1, lng: 1},
  {lat: 2, lng: 2},
  {lat: 3, lng: 3},
  {lat: 4, lng: 4}
];
var linePath = new google.maps.Polyline({
  path: lineCoordinates,
  geodesic: true,
  strokeColor: '#FF0000'
});

linePath.setMap(map);

Collected from the Internet

Please contact [email protected] to delete if infringement.