Develop Reference

How to handle the click event on all the polylines when the cursor is on overlapped polylines?

I have many polylines on map and, if the user click some, I want to "select" the intended polyline, but sometimes polylines can get overlapped. So, if the user wants to select one and click on 2, I want to know what the polylines were clicked by the user and display it. How can I do that?
I tried to write some code that loops the polylines and checks if the clicked location is on some drawing, but does not work because click on drawings does not mean click on the polyline geolocation.
Here's my code: (Run in JSFiddle)
// this example creates 2 polylines (one red, one blue) and add event listener
// to "click", and the handler loops over "polylines" (an array with the 2
// polylines created)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: -25,
lng: -50
},
mapTypeId: 'terrain'
});
var isOnPolyline = function (point, polyline) {
if (point instanceof google.maps.Marker) {
point = point.getPosition();
}
return google.maps.geometry.poly.isLocationOnEdge(point, polyline, 0.0001) ||
google.maps.geometry.poly.containsLocation(point, polyline);
};
var red = new google.maps.Polyline({
path: [{
lat: -25.006,
lng: -52
},
{
lat: -25.006,
lng: -51
}
],
map: map,
name: "red",
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 10
});
red.addListener("click", function (e) {
polylines.map(function (p) {
if (isOnPolyline(e.latLng, p)) {
console.log("hey, you clicked the " + p.name + " one");
}
});
});
var blue = new google.maps.Polyline({
path: [{
lat: -25,
lng: -53
},
{
lat: -25,
lng: -50
}
],
name: "blue",
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 6
});
blue.addListener("click", function (e) {
polylines.map(function (p) {
if (isOnPolyline(e.latLng, p)) {
console.log("hey, you clicked the " + p.name + " one");
}
});
});
var polylines = [red, blue];
}
so I tried to click as shown in the figure (cursor is the yellow circle):
I expected the console logs:
"hey, you clicked the red one
hey, you clicked the blue one"
But nothing was logged.

Cant load a Geojson file as path in Gmaps

I am attempting to create a polygon from a GeoJson file and trigger an alert if a marker leaves the area. I am following gmap tutorials and alot of the code i see is as follows:
var path = [[-12.040397656836609,-77.03373871559225],
[-12.040248585302038,-77.03993927003302], [-12.050047116528843,-
77.02448169303511], [-12.044804866577001,-77.02154422636042]];
polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function(marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
I am trying to use data from a GeoJson file as the path.
I have tried certain lines of code such as:
var path = map.data.loadGeoJson("./js/area.geojson");
But its like the data isnt loading. I am very new to this and would appreciate any feedback, thank you
Updated code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.28, lng: -7.48},
zoom: 10,
});
var path = map.data.loadGeoJson("./js/area.geojson");
polygon = map.drawPolygon({
paths: path,
useGeoJSON: true,
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});;
map.addMarker({
lat: 53.28,
lng: -7.48,
draggable: true,
fences: [polygon],
outside: function(m, f){
alert('This marker has been moved outside of its fence');
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places&language=en&key=AIzaSyBDv0PtStQ3dOIyBcqUSxChO7TB-CqdeXY&callback=initMap">
</script>
<script type="text/javascript" src="gmaps.js"></script>
error:
typeError: map.drawPolygon is not a function[Learn More]
XML Parsing Error: not well-formed
Location: file:///C:/geo_fencing%20project
/js/area.geojson
Line Number 1, Column 1:
The coordinates in the geojson file are creating a border on the map, and i have used the geojson file in other tests and it is fine. But a marker is not appearing.

How to create a circle around any point I click or search on the map ?I do not want to create a predefined radius around a marker [closed]

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
});
});

Add new polygon below everything in Google Maps API

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>

How to place multiple markers and draw route in google map api

I have lat, lng json in one variable
var path = [{"lat":"12.9247903824","lng":"77.5806503296"},{"lat":"10.9974470139","lng":"76.9459457397"}]
and I have created path from the lat lng values
var marker = new google.maps.Marker({
position: pos,
map: map
});
var flightPath = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
bounds: map.getBounds()
});
It is created path from the points. But Only one marker is showing. For that marker have to be shown in all points(path).
and one more, I want to get the address of all lat,lng values

you have to cast your points to google.maps.latLng Points:
var pointsPath = [new google.maps.LatLng(12.9247903824,77.5806503296),new google.maps.LatLng(10.9974470139,76.9459457397)];
Then initialize the map like this:
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var flightPath = new google.maps.Polyline({
path: pointsPath,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope It helps