Question

37

Drawing PolyLine Using an Array of LatLng Coordinates in Google Maps API V3

rated 0 times [ 40] [ 3] / answers: 1 / hits: 7106 / 10 Years ago, tue, july 8, 2014, 12:00:00

I was trying to draw a dynamic polyline in Javascript using Google Map API v3, Here is the Code snippet which i am using :

var map=new google.maps.Map(document.getElementById(googleMap),mapProp);

var myTrip=new Array();

//var y=new google.maps.LatLng(28.360012,77.031527);

//var z=new google.maps.LatLng(28.360124,77.031429);

myTrip.push(new google.maps.LatLng(28.360012,77.031527));

myTrip.push(new google.maps.LatLng(28.360124,77.031429));

myTrip.push(new google.maps.LatLng(28.361024,77.034129));

var flightPath=new google.maps.Polyline({

path:myTrip,

strokeColor:#0000FF,

strokeOpacity:0.8,

strokeWeight:2

});

flightPath.setMap(map); 

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

This isn't drawing Polyline on the map.

Can someone please help me with this ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

1 Year ago

austonjuancarlosb questions

1 TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Sat, Dec 17, 22, 00:00, 1 Year ago

1 How to check if Metamask is connected after page refreshing

Sat, Feb 19, 22, 00:00, 2 Years ago

1 Slash Commands - Discord.js

Sun, Mar 14, 21, 00:00, 3 Years ago

1 How to reload Next.js page initial props without reloading the whole page

Mon, May 18, 20, 00:00, 4 Years ago

1 How can I disable keyboard input on an html input of type number? What about in react or material-ui?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 10 Years ago daphnew · Accepted Answer

You're missing an initialize function:

function initialize() {

    var mapProp = {

        center: new google.maps.LatLng(28.360012, 77.031527),

        zoom: 18,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };



    var map=new google.maps.Map(document.getElementById(googleMap),mapProp);

    var myTrip=new Array();

    myTrip.push(new google.maps.LatLng(28.360012,77.031527));

    myTrip.push(new google.maps.LatLng(28.360124,77.031429));

    myTrip.push(new google.maps.LatLng(28.361024,77.034129));

    var flightPath=new google.maps.Polyline({

        path:myTrip,

        strokeColor:#0000FF,

        strokeOpacity:0.8,

        strokeWeight:2

    });

    flightPath.setMap(map); 

}



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