Google maps: polyline from array - javascript

I have an array, full of coordinates and entries. The thing is, I want to get a polyline which connects all the point coordinates in the array.
Placing markers and infowindows are fine but I can't get the polyline.
I need to go through the array by a loop because I want to use the same way for other coordinates again.
Here is the code:
var places = [
['New Delhi', 28.6139587,77.208684],
['Amritsar', 31.643628, 74.859624],
['Srinagar', 34.09, 74.79],
['Kargil', 34.55, 76.133333],
['Alchi', 34.2334, 77.1625],
['Leh', 34.145397, 77.567614]
];
for (c = 0; c < places.length; c++){
var coords = new google.maps.LatLng(places[c][1], places[c][2])
poly.push(coords);
}
console.log(poly);
var Itinerary = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: '#ffd500',
strokeOpacity: 1.0,
strokeWeight: 5
});
Itinerary.setMap(map);

You have a javascript error in your posted code: Uncaught ReferenceError: poly is not defined.
working fiddle
code snippet:
var geocoder;
var map;
var poly = []; // added this
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
['New Delhi', 28.6139587, 77.208684],
['Amritsar', 31.643628, 74.859624],
['Srinagar', 34.09, 74.79],
['Kargil', 34.55, 76.133333],
['Alchi', 34.2334, 77.1625],
['Leh', 34.145397, 77.567614]
];
var bounds = new google.maps.LatLngBounds();
for (c = 0; c < places.length; c++) {
var coords = new google.maps.LatLng(places[c][1], places[c][2])
poly.push(coords);
bounds.extend(coords);
}
console.log(poly);
var Itinerary = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: '#ffd500',
strokeOpacity: 1.0,
strokeWeight: 5
});
Itinerary.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Related

polygon not being drawn on map from coordinates (from array)

I'm trying to figure out why the polygon is not being drawn on my google maps.
I closed it down to the array but can't see what I'm doing wrong to be honest.
I deleted the google API KEY from my code below to short it a bit.
Any tips/feedback?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
</body>
<script>
function initialize()
{
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//options for the polygon
var polyOptions = {
paths: path,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
Translate your array of arrays into an array of LatLngLiteral objects (or LatLng objects).
var fixedPath = [];
for (var i=0; i<path.length; i++) {
fixedPath.push({lat:path[i][0],lng:path[i][1]});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
proof of concept fiddle
code snippet:
function initialize() {
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var fixedPath = [];
for (var i = 0; i < path.length; i++) {
fixedPath.push({
lat: path[i][0],
lng: path[i][1]
});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
a margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

SVG Icon point in the direction of another marker

I'm making a Google Maps application which has a video camera icon representing the street view and another icon representing any position.
See the Fiddle:
http://jsfiddle.net/uepc2f8n/52/
If I uncomment this "//google.maps.SymbolPath.FORWARD_CLOSED_ARROW", works fine! But when I put the camera path, the position does not get in the right position.
I don't know much about SVG Path, it's complex!
How do I point the lens of the camera in the direction of my marker?
code snippet (from linked fiddle):
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z", //google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 2,
rotation: heading
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}
initialize();
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<div id="map-canvas"></div>
You need to set the anchor and the rotation of the SVG Symbol correctly for your particular symbol. Looks to me like you want an anchor of (3,-10) and a rotation of heading - 90 degrees.
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
updated fiddle
code snippet:
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
scale: 2,
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds.extend(station);
bounds.extend(direction);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>

Google Maps Circle

I am trying to load data from an API then display it using circles. I am able to create markers with the data points but not circles. I am following this example here from Google's documentation.
What I expect to happen is in the for loop, using center: new google.maps.LatLng(well.location.latitude, well.location.longitude) would suffice to create the center points. However, that doesn't seem to work. Everything else is the same as the example (will modify later).
I expected this to work because earlier in the example, I am able to use $.each to display markers using field.location.latitude, field.location.longitude which is essentially the same thing (or so I think).
Can I not make circles within the $.getJSON function like I can with markers? Is it happening "out of sync"? I'm still trying to learn how to process async events.
Fiddle here.
HTML:
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
CSS:
#map {
border: 1px solid black;
margin: 0 auto;
width: 500px;
height: 300px;
}
JavaScript
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
//console.log(markers);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
for (var i = 0; i < data.length; i++) {
//console.log(data[i].location.latitude + ", " + data[i].location.longitude);
};
$.each(data, function(i, field) {
addMarker(field.location.latitude, field.location.longitude);
});
for (var well in data) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude,
well.location.longitude),
radius: 100000
});
};
});
});
data is an array, either iterate through it, or use $.each (or .forEach).
for (var i=0; i < data.length; i++) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
radius: 10000
});
};
or (like you did with the markers):
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
code snippet:
var map;
var mapProp;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
});
});
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#map {
border: 1px solid black;
margin: 0 auto;
width: 99%;
height: 99%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Your code for the markers was correct, but there are some items of your data that do not have a location property, that's why your code is not fully working.
If you want to add Circles instead of markers, you can use your $.each loop and simply check the location block before adding a point.
Here is a working example: http://jsfiddle.net/xb7eh58p/ (sorry, didn't use yours because I had not seen your link)
In details, here is your code that I adjusted:
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
//for (var i = 0; i < data.length; i++) {
// console.log(data[i].location.latitude + ", " + data[i].location.longitude);
//};
$.each(data, function(i, field) {
if(field.location) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(field.location.latitude,
field.location.longitude),
radius: 100000
});
} else {
console.log("Missing location for this data item");
}
});
});
});
As you can see, you just need to ckeck if(field.location)

I am creating google polyline from an array and increment the array with a for loop, but the polyline is not drawn

This is an simple form of question for a bigger problem, I have narrowed down my problem to this piece of code I want some help.
I am trying to give the coordinate of the path i traveled to an array from a for loop, the array has the values but the polyline is not plotting.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates =[];
for (i=0;i<5;i++)
{
flightPlanCoordinates[i] = [new google.maps.LatLng(i,i)];
}
document.getElementById("demo").innerHTML = flightPlanCoordinates; /*this is just to check if array has values*/
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 6.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
There is a javascript error in the posted code:
Uncaught InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number
on this line:
flightPlanCoordinates[i] = [new google.maps.LatLng(i,i)];
That should be:
flightPlanCoordinates[i] = new google.maps.LatLng(i,i);
code snippet:
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [];
for (i = 0; i < 5; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(i, i);
}
document.getElementById("demo").innerHTML = flightPlanCoordinates; /*this is just to check if array has values*/
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 6.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="demo"></div>

Polyline disappear on zoom out API Google Maps V3

According to an old topic this problem should be fixed in version 2 of the API
(https://code.google.com/p/gmaps-api-issues/issues/detail?id=15)
Testing in Chrome v. 35.0.1916.153 and IE9 the bug appeared, already in Firefox v. 31 is working perfectly.
Codes to show the problem:
http://jsfiddle.net/as0wv114/2/
// HTML
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
//CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
//JS
var map;
var latLngBounds;
var coordinate = [];
var flightPath = [];
window.onload = initialize();
function initialize() {
/* Create Map */
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
latLngBounds = new google.maps.LatLngBounds();
/* Create first polyline */
coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');
flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
flightPath[0] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Create second polyline */
coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');
coordinate[4] = new google.maps.LatLng('-25.2793374786', '-50.0998001099');
flightPlanCoordinates = [coordinate[3], coordinate[4]];
flightPath[1] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Set polylines in Map */
flightPath[0].setMap(map);
flightPath[1].setMap(map);
/* Center polilynes in Map */
$.each(coordinate, function(key, value){
latLngBounds.extend(value);
});
map.fitBounds(latLngBounds);
}
http://jsfiddle.net/as0wv114/3/
// HTML
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
//CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
//JS
var map;
var latLngBounds;
var coordinate = [];
var flightPath = [];
window.onload = initialize();
function initialize() {
/* Create Map */
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
latLngBounds = new google.maps.LatLngBounds();
/* Create first polyline */
coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');
flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
flightPath[0] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Create second polyline */
coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');
coordinate[4] = new google.maps.LatLng('-25.2893374786', '-50.0998001099');
flightPlanCoordinates = [coordinate[3], coordinate[4]];
flightPath[1] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Set polylines in Map */
flightPath[0].setMap(map);
flightPath[1].setMap(map);
/* Center polilynes in Map */
$.each(coordinate, function(key, value){
latLngBounds.extend(value);
});
map.fitBounds(latLngBounds);
}
Since the code worked in Firefox v. 31, the problem would be in other browsers or is this a problem of the Google Maps API?
Sorry my english.

Categories

Resources