I'm posting this question because most of the questions I found didn't really answer my question and I finally figured it out. Hopefully this will be helpful to someone else in order to clear things up much more quickly.
-EDIT-
I've edited the question in hopes of it being more useful to anyone who comes across this.
-The Question-
I am having trouble loading multiple polylines into google maps. I've tried passing an array to the new google.maps.Polyline function as follows;
var flightPlanCoordinates = [
{ lat: 41.7171899900261, lng: -85.002969973285587 },
{ lat: 41.716339720601695, lng: -85.00356011920411 },
];
var flightPlanCoordinates2 = [
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
});
flightPath.setMap(map);
That didn't work and caused the error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number"
My next attempt involved trying a for loop as follows (note the lat lng arrays did not change from the code snippet above);
for (let i = 0; i < 2; i++) {
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
id: segID
});
}
flightPath.setMap(map);
This worked but did not provide the results I was hoping for. The lat lng output was the last set of coordinates in my array. What am I doing wrong? Shouldn't the loop establish a new polyline on each iteration of the for loop?
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.713, lng: -85.003},
zoom: 16
});
var flightPlanCoordinates = [
{ lat: 41.7171899900261, lng: -85.002969973285587 },
{ lat: 41.716339720601695, lng: -85.00356011920411 },
{ lat: 41.715420123340095, lng: -85.003969783778473 },
{ lat: 41.713850219112373, lng: -85.0043800221203 },
{ lat: 41.709869880890324, lng: -85.004809740676933 },
{ lat: 41.709570224086633, lng: -85.004860160268152 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
//Loops through all polyline paths and draws each on the map.
for (let i = 0; i < 2; i++) {
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans[i],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
});
flightPath.setMap(map);
}
}
Establish your coordinates and put them into an array. Using a for loop we can establish a new polyline path on each loop. The piece I was missing was that at the end of the for loop, the path needs to be drawn each time as seen below (An admittedly silly mistake but one that I didn't notice until I came into work this morning).
flightPath.setMap(map);
-EDIT-
To provide further explanation, my thinking was that on each iteration of the for loop, a new google.maps.Polyline object was being instantiated and I was correct, but that doesn't mean a new polyline was being drawn on the map. The polyline only gets added to the map when you issue the setMap(map) command as show in the code above. That means, if we want a new polyline from each element in the array, we need to add each polyline to the map on each iteration of the loop.
Related
I'm trying to draw multiple/nested paths between different points on the map using google-map-react.
I know how to draw simple paths but was unsuccessful in drawing the path as in the screenshot attached.
I've tried bypassing the multiple arrays of paths to polygon and polyline but all in vain.
What I want to draw
my current pathHandler's code:
const handleGoogleMapApi = (google) => {
var flightPath = new google.maps.Polyline({
path: [
{
lat: 14.55683,
lng: -90.73362,
},
{
lat: 6.4049,
lng: -75.98329,
},
{
lat: 51.594976,
lng: -0.112939,
},
{
lat: 46.88303,
lng: 9.87583,
},
],
// path: ingredientMapPathLatLng,
geodesic: true,
strokeColor: "#F89C26",
strokeOpacity: 1,
strokeWeight: 3,
});
flightPath.setMap(google.map);
};
What I want to draw
I'm a web developer is brazilian, I am doing a service to the routing system for my company, however I am having difficulties in understanding the library's geometry, I would like to know if there is any way for me to know where the route is drawn is Inside of the polygon 1, 2, 3, or 4). This is it for me to make a division of the route, and to trace up to 4 connections. It has a picture of the bottom with the one I already have, along with the code.
function initMap() {
var map = new google.maps.Map(document.getElementById("map"));
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
var triangle1 = [
{lat: -23.0829, lng: -46.57676},
{lat: -23.61616, lng: -46.57483},
{lat: -23.60694, lng: -47.54864}
];
var Triangle1 = new google.maps.Polygon({
paths: triangle1,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#00FF00',
fillOpacity: 0.35
});
Triangle1.setMap(map);
var triangle2 = [
{lat: -23.0829, lng: -46.57676},
{lat: -23.61616, lng: -46.57483},
{lat: -23.61131, lng: -45.67469}
];
var Triangle2 = new google.maps.Polygon({
paths: triangle2,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#4169E1',
fillOpacity: 0.35
});
Triangle2.setMap(map);
var triangle3 = [
{lat: -23.61131, lng: -45.67469},
{lat: -23.61616, lng: -46.57483},
{lat: -24.07554, lng: -46.57185}
];
var Triangle3 = new google.maps.Polygon({
paths: triangle3,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FFA500',
fillOpacity: 0.35
});
Triangle3.setMap(map);
var triangle4 = [
{lat: -24.07554, lng: -46.57185},
{lat: -23.60694, lng: -47.54864},
{lat: -23.61616, lng: -46.57483}
];
var Triangle4 = new google.maps.Polygon({
paths: triangle4,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FFFF00',
fillOpacity: 0.35
});
Triangle4.setMap(map);
var directionsService = new google.maps.DirectionsService;
function requestDirections() {
directionsService.route({
origin: "Rua pedro jose lorenzini",
destination: "Rua pedro jose lorenzini",
waypoints: waypts,
optimizeWaypoints: true,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result) {
renderDirections(result);
if(google.maps.geometry.poly.containsLocation(result, Triangle1) == true) {
alert("yes");
}
});
}
requestDirections(waypts);
requestDirections(waypts2);
}
Google Maps
I got it
First I retrieved the coordinates of the addresses that would be part of the route, I placed each one inside its respective fields, after that I put the function to check if that coordinate belonged to the polygon, returning the value true it was placed inside the route array
function(result) {
for(var i = 0; i < 24; i++){
if($("#latLgn_"+i).val() != "" || $("#latLgn"+i).val() != undefined){
temp = $("#latLgn"+i).val()
temp = temp.split(",")
temp[0] = temp[0].replace("(","")
temp[1] = temp[1].replace(")","")
temp[0] = Number(temp[0])
temp [1] = Number(temp[1])
var point = new google.maps.LatLng({lat: temp[0], lng: temp[1]})
if(google.maps.geometry.poly.containsLocation(point, Triangle1) == true) {
route.push($("#latLgn"+i).val());
}else{console.log("Not found")}
}
}
renderDirections(result);
}
I have a set of data about earthquakes, which I need to display it on the google map using circles. At first I used marker to make sure maps work properly. Markers was displayed fine. Then I tried to draw circles with certain radius and coordinates the same as markers, unfortunately they wasn't drown. I found google's tutorial for circles with US cities, which works correct.
After some tests I understood that my problem somehow is related with point coordinates. I can't say what exactly wrong with coordinates, because they are object { lat: val, lng: val } and there isn't any errors, circles just aren't displayed.
I made this gist (please don't steal my api key:)) in order to you can see it for yourself. Hope someone has enough experiences in google maps to know that is wrong (looks like there is no other way to understand the problem). I use google maps for the first time.
As advised by geocodezip, if the calculated 'radius' values are too small may be the reason for not drawing the circle.
As per below calculation, radio is calculated as 2 to the power of 3.3 or 2 raised to 3.3 ( magnitude ), which is 9.849 divided by 2 = 4.924 which is the small to plot for a circle I guess.
Calculation:
radius: Math.pow(2, testEvents[event].magnitude) / 2.0
So I have increased the magnitude values to 17.3, 17.4, 15.4, 15.3 for all of the testEvents objects
and now I am able to see the circles for those markers; see the screen shot attached. Fiddle link attached too.
[![<!DOCTYPE html>
<html>
<head>
</head>
<style>
.map {
height: 500px;
}
</style>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
<div class="row">
<div class="col-md-6 map" id="map1"></div>
<div class="col-md-6 map" id="map2"></div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap">
</script>
<script>
var map1;
var map2;
var citymap = {
chicago: {
center: { lat: 41.878, lng: -87.629 },
population: 2714856
},
newyork: {
center: { lat: 40.714, lng: -74.005 },
population: 8405837
},
losangeles: {
center: { lat: 34.052, lng: -118.243 },
population: 3857799
},
vancouver: {
center: { lat: 49.25, lng: -123.1 },
population: 603502
}
};
var testEvents = {
0: {
point: { lat: 85.09, lng: 15.91 },
magnitude: 17.3
},
1: {
point: { lat: 84.22, lng: 2.85 },
magnitude: 17.4
},
2: {
point: { lat: 85.04, lng: 11.79 },
magnitude: 15.4
},
3: {
point: { lat: 85.25, lng: 13.22 },
magnitude: 15.3
}
};
function initMap() {
map1 = new google.maps.Map(document.getElementById('map1'), {
zoom: 2,
center: new google.maps.LatLng(74.370702, 34.767772),
mapTypeId: 'satellite'
});
map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 2,
center: new google.maps.LatLng(74.370702, 34.767772),
mapTypeId: 'satellite'
});
WriteQuakeEvents();
}
function WriteQuakeEvents() {
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map2,
center: citymap\[city\].center,
radius: Math.sqrt(citymap\[city\].population) * 100
});
}
for (var event in testEvents) {
var marker = new google.maps.Marker({
position: testEvents\[event\].point,
map: map1
});
var circle = new google.maps.Circle({
strokeColor: '#FFFFFF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map1,
center: testEvents\[event\].point,
radius: Math.pow(2, testEvents\[event\].magnitude) / 2.0
});
}
}
</script>
</div>
</body>
</html>][1]][1]
//Fiddle here:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
The code below is a sample API to create a circle, what can I make to adjust the code respond to a click instead of creating a circle around a predefined marker. Please see here below:
https://developers.google.com/maps/documentation/javascript/examples/circle-simple
<script>
// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>`enter code here`
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Assuming map is you google maps object You could add a map click event this way
google.maps.event.addListener(map, "click", function () {
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
});
I have a Google.Map object with a set of polygons and polylines already being displayed on that.
I want to add a new google.maps.Polygon object that should be displayed below all elements (more or less like a "background" polygon).
I tried to add it with an absurd low zIndex value (-999999), but it still is displayed above all other elements.
This is what I have done so far:
whiteBackground = new google.maps.Polygon({
path: [ {lat:40.1, lng:-97.1},
{lat:40.1, lng:-89.8},
{lat:44.5, lng:-89.8},
{lat:44.5, lng:-97.1} ],
strokeColor: "#FF0000",
fillColor: "#FFFFFF",
strokeOpacity: 1.0,
strokeWeight: 1.5,
fillOpacity: 1.0,
zIndex: -999999
});
// add to map and to list
whiteBackground.setMap(my_map);
Is there a way to force new polygon whiteBackground to have the smallest zIndex value in the Google.Map in which it is going to be add?
Or there is an way to iterate over all current elements in a Google.Map object?
It works if you set the zIndex properties of all the polygons.
proof of concept fiddle (moves smaller polygon above/below larger polygon on click of the button)
code snippet:
// This example creates a simple polygon representing the Bermuda Triangle and a small polygon that starts above it, toggles above/below by clicking the button (large polygon has zIndex=0; small polygon is +/-1.
var map;
var infoWindow;
var poly2;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [{
lat: 25.774,
lng: -80.190
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
zIndex: 0
});
bermudaTriangle.setMap(map);
var poly2Coords = [{
lat: 26.78484736105119,
lng: -72.24609375
}, {
lat: 27.059125784374068,
lng: -68.8623046875
}, {
lat: 23.926013339487024,
lng: -71.806640625
}];
poly2 = new google.maps.Polygon({
paths: poly2Coords,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
zIndex: 1
});
poly2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<input id="btn" type="button" value="click" onclick="if (poly2.get('zIndex') > 0) poly2.setOptions({zIndex:-1}); else poly2.setOptions({zIndex:1});" />
<div id="map"></div>