I'm using Google Maps to highlight a bunch of countries using Fusion Tables to grab the geometry. You can see an example of this here:
http://jsfiddle.net/4mtyu/689/
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: "ISO_2DIGIT IN ('AF','AL','DZ','AD','AO','AG','AR','AM','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BT','BO','BA','BW','BR','BN','BG','BF','BI','KH','CM','CA','CV','CF','TD','CL','CN','CO','KM','CG','CD','CR','HR','CU','CY','CZ','DK','DJ','DM','DO','EC','EG','SV','GQ','ER','EE','ET','FJ','FI','FR','GA','GM','GE','DE','GH','GR','GD','GT','GN','GW','GY','HT','HN','HU','IS','IN','ID','CI','IR','IQ','IE','IL')"
},
options : {suppressInfoWindows:true},
styles: [{
polygonOptions: {
fillColor: "#000000",
strokeWeight: "0",
fillOpacity: 0.4
}
}]
});
The problems begin when I try to grab too many items from the table. Google uses a URL with all of the query values to grab the data required and with URL encoding it can grow to be quite large in length.
You can see an example of the URL here if you open up the console and check the URLs being thrown in the errors:
http://jsfiddle.net/4mtyu/690/
The URL it generates in that particular example is 3749 characters, way over the 2048 character limit.
Does anybody have any ideas on a way I could prevent the URL from getting this large but at the same time still be able to select 150+ items?
The easiest solution is to move things client-side:
http://jsfiddle.net/4mtyu/725/
Part 1 :: Initialize the map and fusion tables
You can do this how ever you prefer, just make sure the fusion tables have all countries selected. Example:
function initialize() {
//settings
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//get map div
map = new google.maps.Map(document.getElementById('map_div'),
myOptions);
// Initialize padded JSON request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
//select all the countries!!
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
//generate URL
url.push(encodedQuery);
url.push('&callback=drawMap');//Callback
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');//select all countries
script.src = url.join('');
//Add Script to document
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
Part 2 :: Sort countries and render
(a) Once you have the full list of countries, you have to sort them. A simple indexOf check should do the trick.
(b) After sorting we need turn our countries into LatLon Coordinates, this is done in the constructNewCoordinates function (see below)
(c) Then all that's left is to generate the polygon and add it to our map!
Example:
var countries = [...];
//This is the callback from the above function
function drawMap(data) {
//Get the countries
var rows = data['rows'];
for (var i in rows) {
// (a) //
//If the country matches our filled countries array
if (countries.indexOf(rows[i][0]) !== -1)
var newCoordinates = [];
// (b) //
// Generate geometries and
// Check for multi geometry countries
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
//Calls our render function, returns Polygon Coordinates (see last step);
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
//Calls our render function, returns Polygon Coordinates (see last step);
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
// (c) //
//Generate Polygon
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeWeight: 0,
fillColor: '#000000',
fillOpacity: 0.3
});
//add polygon to map
country.setMap(map);
}
}
}
}
Part 3 :: Generating the coordinates
// (b) //
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
Related
I'm trying to display a heatmap from some data in CSV format. I'm trying to get the data from the CSV file into a JavaScript variable, but I don't know how to do that.
I use the following Leaflet plugins:
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="heatmap.js"></script>
<script src="leaflet-heatmap.js"></script>
My code is below:
<script>
window.onload = function() {
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}
);
var testData = {
max: 8,
data: [
{lat: 24.6408, lng:46.7728, count: 3},
{lat: 50.75, lng:-1.55, count: 1},
{lat: 52.6333, lng:1.75, count: 1}
]
};
var cfg = {
"radius": 2,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map', {
center: new L.LatLng(25.6586, -80.3568),
zoom: 4,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
layer = heatmapLayer;
};
</script>
The CSV file looks like this:
id;Código postal;Localidad;Valoracion;lat;lng
1;46100;Burjassot;8;39.51;-0.425055
2;18005;Granada;7;37.169266;-3.597161
There are a lot of different approaches to the problem. What I'm going to describe is just one of them.
First off, I'm gonna use the latest available version of Leaflet:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
And just one heatmap plugin. There is no reason on earth why you should need two heatmap plugins at the same time.
<script src="https://unpkg.com/leaflet.heat#0.2.0/dist/leaflet-heat.js"></script>
Next off is reading the contents of a text file into a JS variable. There are several methods, but I'm particularly fond of the fetch API:
fetch('http://something/something/data.csv').then(function(response){
return response.text();
}).then(function(text){
// Handling of the text contents goes here
}).catch(function(err){
// Error handling goes here (e.g. the network request failed, etc)
})
Split the text into lines...
var lines = text.split("\n");
...iterate through the lines, except the first one...
for (var i=1; i<lines.length; i++) {
...split the line into the comma-separated parts (in this case, semicolon-separated); I'm assuming a trivial CSV format (things can get a bit more complicated with some CSV files)...
var parts = lines[i].split(";");
...get the data you want to show on the heatmap, in a form that the heatmap plugin will like, keeping in mind that parts is a 0-indexed array...
var heatData = []
for(...){
...
// heatData.push( lat, lng, weight )
heatData.push( [ parts[4], parts[5], parts[3] ] )
...and once the loop over the lines is over and heatData is ready, init the heatmap:
var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);
And put it all together:
var map = new L.Map('map').fitWorld();
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
// I'll just ignore the network request and fake some data.
// fetch('http://something/something/data.csv').then(function(response){
// return response.text();
// }).then(function(text){
text = "id;Código postal;Localidad;Valoracion;lat;lng\n1;46100;Burjassot;8;39.51;-0.425055\n2;18005;Granada;7;37.169266;-3.597161";
var lines = text.split("\n");
var heatData = [];
for (var i=1; i<lines.length; i++) {
var parts = lines[i].split(";");
heatData.push( [ parts[4], parts[5], parts[3] ] );
}
var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);
// }).catch(function(err){
// // Error handling for the fetch goes here (e.g. the network request failed, etc)
// })
See a working example here.
Please do not blindly copy-paste the code. Every time you copy-paste code, the stackoverflow gods kill a kitten and somebody cooks rice with peas and fish on it and calls it paella. Think on the kittens. And the paella.
Please note that I've split the problem is several, smaller problems:
Choose the right tools (leaflet version, heatmap implementation)
Read a text file (fetch/ajax/XHR/etc)
Parse the CSV (split lines from the file, and fields form the lines)
Create a data structure for the heatmap (loop, choose fields)
Depending on your specific scenario, you might have to modify any of these smaller problems.
Try this. In practice, you'll need an AJAX call to load your CSV file. In the success function, assign it to a variable (rather than using a textarea, as I have here, for illustration).
mapData = [];
CSV = $('#input').val();
var lines = CSV.split("\n");
var result = [];
var headers = lines[0].split(";");
for (var i = 1; i < lines.length; i++) {
var obj = {};
var nextline = lines[i].split(";");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = nextline[j];
}
result.push(obj);
}
$.each(result, function(i, el) {
lat = el.lat;
lng = el.lng;
newData = {
lat: lat,
lng: lng
};
mapData.push(newData);
});
console.log(mapData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input">
id;Código postal;Localidad;Valoracion;lat;lng
1;46100;Burjassot;8;39.51;-0.425055
2;18005;Granada;7;37.169266;-3.597161</textarea>
There are many ways to do it but I prefer to read CSV files using D3.js library. It may be useful where you can do more calculations on your data or maybe just read it!!
after installing d3:
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
then simply:
d3.csv(url, function(data) {
console.log(data)
})
url refer to your data source it may be something like this
url = 'http://something/something/data.csv'
Once I have created a map with multiple markers using google maps API, I want to additional selections to highlight a subset of markers displayed. I would like to do this without going back to the server. Preferably I would like to store data in marker or array. I could either substitute with new marker or overlay an image on top of the marker. Can anyone propose example of how to do this - specifically part about adding image or change marker.
Example below...
Here's an example, which assumes that when you load your page you have this data returned from the server in JSON.
data = [{
latitude: 103.2,
longitude: 12.3,
isDiscountOutlet: false
}, {
latitude: 101.2,
longitude: 11.3,
isDiscountOutlet: false
}
]
The basic approach is that we store that data in the browser, and use it to update the appearance of markers when changing a selection.
Part 1: Create a global variable to store our markers in
var storedMarkers;
Part 2: Create a Map using the data from the server
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(103, 11)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Add the markers. We are going to store them in a global array too,
// so we can access them later.
for (var i = 0; i < data.length; ++i) {
// Create one marker for each piece of data.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
map: map
});
// Store that marker, alongside that data.
var dataToStore = {
markerObject: marker,
dataAssociatedWithMarker: data[i]
};
storedMarkers.push(dataToStore);
}
google.maps.event.addDomListener(window, 'load', initialize);
Part 3: Let's show all discount outlets, and hide all other markers, when someone clicks a button
I'm assuming you have a DOM element (a button) with id 'discount'. I'm also going to cheat and use jQuery :)
$("#discount").click(function () {
for (var i = 0; i < storedMarkers.length; ++i) {
var currentStoredMarker = storedMarkers[i];
// Is this marker a discount outlet?
if (currentStoredMarker.dataAssociatedWithMarker.isDiscountOutlet == true) {
// Let's show it!
currentStoredMarker.markerObject.setVisible(true);
} else {
// Let's hide it!
currentStoredMarker.markerObject.setVisible(false);
}
}
});
So I'm working on a webpage using the Google Earth API where a shuttle moves around the town and picks up passengers. PASSENGERS is a predefined array of objects and is a separate javascript file due to the length. Here is my code for the function populate which populates the 3D map with placemarks:
function populate()
{
// mark houses
for (var house in HOUSES)
{
// plant house on map
new google.maps.Marker({
icon: "https://google-maps-icons.googlecode.com/files/home.png",
map: map,
position: new google.maps.LatLng(HOUSES[house].lat, HOUSES[house].lng),
title: house
});
}
// get current URL, sans any filename
var url = window.location.href.substring(0, (window.location.href.lastIndexOf("/")) + 1);
// scatter passengers
for (var i = 0; i < PASSENGERS.length; i++)
{
// pick a random building
var building = BUILDINGS[Math.floor(Math.random() * BUILDINGS.length)];
// prepare placemark
var placemark = earth.createPlacemark("");
placemark.setName(PASSENGERS[i].name + " to " + PASSENGERS[i].house);
// prepare icon
var icon = earth.createIcon("");
icon.setHref(url + "/img/" + PASSENGERS[i].username + ".jpg");
// prepare style
var style = earth.createStyle("");
style.getIconStyle().setIcon(icon);
style.getIconStyle().setScale(4.0);
// prepare stylemap
var styleMap = earth.createStyleMap("");
styleMap.setNormalStyle(style);
styleMap.setHighlightStyle(style);
// associate stylemap with placemark
placemark.setStyleSelector(styleMap);
// prepare point
var point = earth.createPoint("");
point.setAltitudeMode(earth.ALTITUDE_RELATIVE_TO_GROUND);
point.setLatitude(building.lat);
point.setLongitude(building.lng);
point.setAltitude(0.0);
// associate placemark with point
placemark.setGeometry(point);
// add placemark to Earth
earth.getFeatures().appendChild(placemark);
// add marker to map
var marker = new google.maps.Marker({
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/ms/micons/man.png",
map: map,
position: new google.maps.LatLng(building.lat, building.lng),
title: PASSENGERS[i].name + " at " + building.name
});
//remember passenger's placemark and marker for pick-up's sake
PASSENGERS[i].lat = placemark.getGeometry.getLatitude();
PASSENGERS[i].lng = placemark.getGeometry.getLongtitude();
}
}
However, when I load my page I get the following error from the console: Uncaught TypeError: undefined is not a function regarding the two last lines of code:
PASSENGERS[i].lat = placemark.getGeometry.getLatitude();
PASSENGERS[i].lng = placemark.getGeometry.getLongtitude()
Any ideas how I can correctly get the lat and lng? Thank you in advance.
As others have said getGeometry is a method and needs brackets () to be executed.
Also looking at your code you can just use building.lat and building.lng - as these are the properties used to set the placemark's geometry in the first place.
Really it is pointless calling more methods, getGeometry().getLatitude(), to get a value you already have.
The person is at the building, no?
e.g.
PASSENGERS[i].lat = building.lat;
PASSENGERS[i].lng = building.lng;
Try
PASSENGERS[i].lat = placemark.getGeometry().getLatitude();
PASSENGERS[i].lng = placemark.getGeometry().getLongtitude();
What i have done so far:
i'm developing an application where i have to display more than(50K) points/Markers on the Navteq map divided into different segments.
for example: if i have 50K points i will divide all points into different segments.
if i divide 50K points into 50 segments each segment would have 1000 points (may not be 50 segments , it may depend).
right now it is working but it takes long time and hangs to render all the points on the MAP.so that i would like to perform segmentation displaying to display only few points with clustering.
so that i can get an idea of how the segment will look like.
but the problem here is i should only perform the clustering based on the segments.otherwise points from different segments willbe mixed together and displayed
as single unit and that conveys the wrong information to the user.
so here my question is: is it possible to perform the clustering based on the segment. so that only points from same segment will be clustered.
Note: if this is not possible, i would like to use Latest version of here-maps 2.5.3 (Asynchronous) may reduce some time while loading, so that i would like to use indexing functionality also while rendering the points
to improve the rendering time using nokia.maps.clustering.Index class.
i studied that indexing would reduce the time while rendering the points/markers on map. does it help in my case? could anybody please suggest how to perform indexing ?
This is the code with which i'm displaying points on map:
function displayAllLightPoints(arrLightPointCoordinats, totalLightPoints,
selectedSegmentId, totalSegmentsCount,segmentColorcode)
{
var MyTheme1 = function () {
};
segmentColorcode = segmentColorcode.substring(2,segmentColorcode.length-1);
MyTheme1.prototype.getNoisePresentation = function (dataPoint) {
var markerLightPoint = new nokia.maps.map.Marker(dataPoint, {
icon: new nokia.maps.gfx.BitmapImage("..//Images//Lightpoint//" +
segmentColorcode + ".png"),
anchor: {
x: 12,
y: 12
}
});
return markerLightPoint;
};
MyTheme1.prototype.getClusterPresentation = function (data) {
var markerLightPoint = new
nokia.maps.map.StandardMarker(data.getBounds().getCenter(), {
icon: new nokia.maps.gfx.BitmapImage("..//Images//
Segment/" + segmentColorcode + ".png", null, 66, 65),
text: data.getSize(),
zIndex: 2,
anchor: {
x: 12,
y: 12
}
});
return markerLightPoint;
};
var ClusterProvider = nokia.maps.clustering.ClusterProvider,
theme = new MyTheme1(),
clusterProvider = new ClusterProvider(map, {
eps: 0.00000000001,
minPts: 1000000,
strategy: nokia.maps.clustering.ClusterProvider.
STRATEGY_DENSITY_BASED,
theme: theme,
dataPoints: []
});
var lightpointsDataSet1 = new Array();
for (var i = 0; i < totalLightPoints; i++) {
lightpointsDataSet1[i] = { latitude: arrLightPointCoordinats[i][0],
longitude: arrLightPointCoordinats[i][1], title:
'LightPoint ' + (i + 1) };
}
clusterProvider.addAll(lightpointsDataSet1);
clusterProvider.cluster();
}
To deal with a very large (50K+) data set , I would do all the heavy number crunching server side and send over a new JSON response whenever the map is updated. Something like the HTML page described here
The key section of the code is the ZoomObserver:
var zoomObserver = function (obj, key, newValue, oldValue) {
zoom = newValue;
if (zoom < 7)
{ zoom = 7;}
if (zoom > 16)
{ zoom = 16;}
// Define the XML filename to read that contains the marker data
placeMarkersOnMaps('http://api.maps.nokia.com/downloads/java-me/cluster/'+ zoom + '.xml'
+ '?lat1=' + map.getViewBounds().topLeft.latitude
+ '&lng1='+ map.getViewBounds().topLeft.longitude
+ '&lat2='+ map.getViewBounds().bottomRight.latitude
+ '&lng2='+ map.getViewBounds().bottomRight.longitude);
};
map.addObserver("zoomLevel", zoomObserver );
Where the REST service returns a "well-known" data format which can be used to add markers and clusters to the map.
Now assuming you have two massive data sets you could make two requests to different endpoints, or somehow distinguish which cluster of data belongs to which so that you would just be returning information of the form:
{latitude':51.761,'longitude':14.33128,'value':102091},
i.e. using the DataPoint standard (which means you could use a heat map as well.
Of course, what I'm not showing here is the back-end functionality to cluster in the first place - but this leaves the client (and the API) to do what it does best displaying data, not number crunching.
the following code is used to draw a polyline on Google Maps using V3 API, but sometimes is draws the polyline and most of times doesn't despite there are point (as I can show the points on the map as markers) but no polyline appears
update 2 : I am using openstreetmap layer over Google maps. does that cause the problem when drawing the polyilne ?
w variable contains data as string , for example :
w= 35.1212,55.2333\n36.32366,56.3333
Real data sample for w : [this code can draw markers for the following points but can't draw a polyline ]
34.440501,31.515222
34.441933,31.514346
34.44247,31.514013
34.442603,31.51394
34.443607,31.513423
34.4445,31.512926
34.444762,31.512772
34.445186,31.512523
34.445257,31.512481
34.445311,31.512449
34.445614,31.512264
34.446244,31.511867
34.446939,31.511429
34.447351,31.511193
34.448081,31.512174
34.448241,31.512357
34.448576,31.512741
34.449147,31.513185
34.4499,31.513723
34.450894,31.514401
34.451925,31.515362
34.452905,31.516176
34.454194,31.517266
34.455337,31.518236
34.456215,31.51898
34.456987,31.519646
34.457583,31.520166
34.458298,31.520772
34.458989,31.52139
34.459659,31.521959
34.460476,31.522653
34.461192,31.523228
34.461869,31.523788
34.46256,31.524376
34.463302,31.525015
34.464062,31.525668
34.464433,31.525986
34.464737,31.526246
34.465247,31.526683
34.465498,31.526907
34.466666,31.52792
34.46722,31.528404
34.467327,31.528495
34.468014,31.529081
34.468379,31.52939
34.469296,31.530177
34.469771,31.530583
34.470152,31.53091
34.470951,31.531597
34.471617,31.532172
34.472388,31.532838
34.472664,31.533076
34.47295,31.533397
34.473422,31.533653
34.474028,31.534065
34.474844,31.534629
34.475725,31.535253
34.476083,31.535517
34.476697,31.535947
34.477105,31.536209
34.477627,31.536477
34.478,31.536742
34.478398,31.536989
34.478935,31.537325
34.480044,31.537975
34.480985,31.538529
34.481362,31.53878
34.481416,31.538819
34.482407,31.539419
34.482682,31.539109
34.483132,31.538603
34.483341,31.538368
34.483917,31.537753
34.484202,31.537449
34.484288,31.537357
34.484944,31.536587
34.485118,31.536383
34.485205,31.536304
34.485648,31.535903
34.485984,31.535598
34.486246,31.535381
34.486445,31.535291
34.486533,31.535254
34.486607,31.535282
34.486706,31.535354
34.486869,31.535526
34.487012,31.535692
34.487212,31.535923
34.487273,31.536006
34.487767,31.53571
34.488336,31.535395
34.48883,31.535148
34.489078,31.535032
34.489354,31.534901
34.48955,31.534788
34.489756,31.535011
34.489831,31.535097
34.490268,31.534748
34.49065,31.534473
34.490857,31.53436
34.491044,31.534319
34.491352,31.534248
34.491458,31.534237
34.491548,31.534304
34.491879,31.534209
34.492227,31.534203
34.492457,31.534214
34.492042,31.533636
34.492162,31.533542
note : I have reversed lng and lat when creating a point for some purpose
where a is array that has the points to represent as a polyine
code
var mypolyline = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});
// var bounds2 = new google.maps.LatLngBounds();
var a=w.split("\n");
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var path = [];
var path = mypolyline.getPath();
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
// alert(path.length);
path.push(point);
mypolyline.setPath(path);
mypolyline.setMap(map);
}
CreateMarker() function
function createMarker(id,name,point,icon,type) {
// var marker = new google.maps.Marker(point, customIcons[type]);
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({ content: name });
infowindow.open(map, marker);
map.panTo(point);
});
return marker;
}
So you create an array, then you ignore that and recreate it as an MVCArray using the getPath() function. Get rid of the first line (this isn't the cause of the problems though).
var path = [];
var path = mypolyline.getPath();
Just a thought - is the path a required attribute when you first create the polyline?
It seems to me that you initially create the mypolyline without any path. So when you then do this on the first iteration, it's not going to work, because all you're passing to .setPath() is one point, but I assume a path can only work when there's at least 2 points.
path.push(point);
mypolyline.setPath(path);
Update: I think the thing to do would be to just start out with an empty array, loop over your coordinates adding them into the array. Then after the loop, create the polyline, rather than trying to update it each time you iterate over the loop. For instance:
var a=w.split("\n");
var path = [];
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
path.push(point);
}
var mypolyline = new google.maps.Polyline({
path: path,
map: map,
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});