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

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.

edited at
0

Comments

0 comments
Login to comment

Related

How can I draw a line between two google map native markers? (Ionic 3, cordova)

how to draw a line with two point in it in flutter

Multiple polyline between two point in google map

GoogleMaps : How to draw dash line to connect with starting point of direction path on google map ios

How to draw polyline on google map with two different colors between two locations

How to draw a line / link between two points on a D3 map based on latitude / longitude?

How to draw line between the markers in google map, using laravel5.2

How can I draw polyline Between two location in Google Map using Android?

How to draw line between two points in JavaScript - Google Maps Api Route

How to draw a line between a data point and an axis in matplotlib?

How draw line between point using achart engine android

How to draw vertical separation line between two text line android?

Get distance and draw line between two location android google maps

How To Draw Path On Google Map Based on array of Point in Json String

How to project two point line on the map into a curved line OpenLayers

Get Distance Between Specific Point to the Line Drawn on Google Map

How to draw image dynamically on a canvas line between two cells

How do I draw an Ideal line between two headers?

Matplotlib how to draw vertical line between two Y points

How to draw line between two circle in html canvas element

How do I draw a horizontal line between two circles with CSS?

How to draw a line between two points over an image in swift 3?

How to draw a line between two views in Swift 3?

How to draw a line between two points objective-C

How to draw a line between two given points in R with plotly?

How to re-draw line connected between moveable two UIView

draw straight line between any two point when using coord_polar() in ggplot2 (R)

Draw arrow between on line between two points

Draw radius around a point in Google map

TOP Ranking

  1. 1

    How can I create a column whose entries depend on the contents of a column in another table?

  2. 2

    pump.io port in URL

  3. 3

    How to display items using sessions

  4. 4

    BigQuery - concatenate ignoring NULL

  5. 5

    no applicable method for 'mutate_' applied to an object of class "c('integer', 'numeric')"

  6. 6

    How i extract text from a model dialog in selenium?

  7. 7

    x no applicable method for 'tbl_vars' applied to an object of class "c('double', 'numeric')"

  8. 8

    AirflowException: Celery command failed - The recorded hostname does not match this instance's hostname

  9. 9

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  10. 10

    Most efficient regex for checking if a string contains at least 3 alphanumeric characters

  11. 11

    using excel range find return Type mismatch. (Exception from HRESULT: 0x80020005 (DISP_E_TYPEMISMATCH))

  12. 12

    redirect your computer port to url

  13. 13

    Can't create database with Symfony 4.1 : could not find driver

  14. 14

    How to fix "Exception evaluating SpringEL expression" error after submitting a variable Spring/Thymeleaf

  15. 15

    A python function to get the maximum value of a specific column, given a string that represents a table in CSV format

  16. 16

    Double spacing in rmarkdown pdf

  17. 17

    Uploading Files on production server returns either CORS error or POST 400 Bad Request using Apollo-Graphql

  18. 18

    Android Kotlin Unit test failing with io.mockk.MockKException: no answer found for

  19. 19

    Change Model input_shape but got an : ValueError: Input 0 of layer dense_44 is incompatible with the layer

  20. 20

    Formik, Yup - How to check is Decimal number

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive