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>

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>

• javascript
• jquery
• google-maps

• 1 What exactly do you mean by a curved line? Do you want a line that is along a valid path between two points? – arnabkaycee Commented May 20, 2017 at 11:46
• Hi, I need draw a line between two points. – mySun Commented May 20, 2017 at 11:55
• from docs but you want in jquery so add fiddle example which can show the problem you are facing – Deep 3015 Commented May 20, 2017 at 12:28
• Hi, @Deep3015, I do not know good jQuery. :-( Can you answer? – mySun Commented May 20, 2017 at 12:36
• Hi, @arnabkaycee I need draw a line between two points. – mySun Commented May 20, 2017 at 12:36

1 Answer 1

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);