Using the Polyline method, I am trying to draw a polyline on Google Maps on a Desktop environment using the Google Map API. If I click or get a mouseover on a line then I would like to show a dialog where it will show the name of the line. I get both the mouseover and click events in my application when I click on the line. But I can’t iterate because the API returns false. Could you give me a tip, about what I am doing wrong? Here is the code. I want to show the name property on the dialog. Thank you.
var g_infoWindow;
var g_curvePathArray;
var g_curvePathObjects = {};
var g_pathArray = [];
var g_pathObjects = {};
g_pathObjects['pipesegment_103'] = {
"coordinates": [
{ lat: 61.31904092678181, lng: 24.858185804137534 },
{ lat: 61.31913616518112, lng: 24.857952505746248 },
{ lat: 61.319173741447855, lng: 24.857381278784956 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_103"
};
g_pathObjects['pipesegment_49'] = {
"coordinates": [
{ lat: 61.319173741447855, lng: 24.857381278784956 },
{ lat: 61.318964199094346, lng: 24.856899615641428 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_49"
};
g_pathObjects['pipesegment_52'] = {
"coordinates": [
{ lat: 61.318964199094346, lng: 24.856899615641428 },
{ lat: 61.31897482431248, lng: 24.856266614313913 }
],
strokeColor: g_pipeFillColorNormal,
blockedAlarm: false,
postsuction: false,
suction: false,
name: "pipesegment_52"
};
for (var singlePath in g_pathObjects) {
var populationOptions = {
path: g_pathObjects[singlePath].coordinates,
geodesic: true,
strokeColor: g_pathObjects[singlePath].strokeColor,
strokeOpacity: .8,
strokeWeight: 5,
name: g_pathObjects[singlePath].name
};
var myownpath = new google.maps.Polyline(populationOptions);
myownpath.setMap(g_map)
g_pathArray.push(myownpath);
google.maps.event.addListener(myownpath, 'click', function (e) {
var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
for (var i = 0; i < g_pathArray.length; i++) {
let b = google.maps.geometry.poly.containsLocation(myPosition1, g_pathArray[i]);
if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.0)) {
g_infoWindow = new google.maps.InfoWindow({
content: myownpath.name,
});
console.log('index isLocationOnEdge= ' + i);
g_infoWindow.setPosition(locs);
g_infoWindow.open(g_map);
break;
}
}
});
google.maps.event.addListener(myownpath, 'mouseoverr', function (e) {
var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
for (var i = 0; i < g_pathArray.length; i++) {
let b = google.maps.geometry.poly.containsLocation(e.latLng, g_pathArray[i]);
if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i])) {
g_infoWindow = new google.maps.InfoWindow({
content: g_pathArray[i].name,
});
g_infoWindow.setPosition(locs);
g_infoWindow.open(g_map);
break;
}
}
Thank you!
4
You are facing this issue because you have used google.maps.geometry.poly.containsLocation and google.maps.geometry.poly.isLocationOnEdge methods in you code but these are meant for checking polygons and not polylines.
I will recommend you to switch from using containsLocation to focusing on isLocationOnEdge, as will work for polylines with little bit of settings.
Also, I can see that there is one typing mistake present in you code i.e “mouseverr”, change it to “mouseover”.
var g_infoWindow;
var g_pathArray = [];
var g_pathObjects = {};
g_pathObjects['pipesegment_103'] = {
"coordinates": [{
lat: 61.31904092678181,
lng: 24.858185804137534
},
{
lat: 61.31913616518112,
lng: 24.857952505746248
},
{
lat: 61.319173741447855,
lng: 24.857381278784956
}
],
strokeColor: '#FF0000',
name: "pipesegment_103"
};
g_pathObjects['pipesegment_49'] = {
"coordinates": [{
lat: 61.319173741447855,
lng: 24.857381278784956
},
{
lat: 61.318964199094346,
lng: 24.856899615641428
}
],
strokeColor: '#00FF00',
name: "pipesegment_49"
};
g_pathObjects['pipesegment_52'] = {
"coordinates": [{
lat: 61.318964199094346,
lng: 24.856899615641428
},
{
lat: 61.31897482431248,
lng: 24.856266614313913
}
],
strokeColor: '#0000FF',
name: "pipesegment_52"
};
function initMap() {
var mapOptions = {
center: {
lat: 61.31904092678181,
lng: 24.857952505746248
},
zoom: 15
};
var g_map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (var singlePath in g_pathObjects) {
var populationOptions = {
path: g_pathObjects[singlePath].coordinates,
geodesic: true,
strokeColor: g_pathObjects[singlePath].strokeColor,
strokeOpacity: 0.8,
strokeWeight: 5,
name: g_pathObjects[singlePath].name
};
var myownpath = new google.maps.Polyline(populationOptions);
myownpath.setMap(g_map);
g_pathArray.push(myownpath);
google.maps.event.addListener(myownpath, 'click', function(e) {
var locs = {
lat: e.latLng.lat(),
lng: e.latLng.lng()
};
var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
for (var i = 0; i < g_pathArray.length; i++) {
if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.00001)) {
g_infoWindow = new google.maps.InfoWindow({
content: g_pathObjects[singlePath].name
});
g_infoWindow.setPosition(locs);
g_infoWindow.open(g_map);
break;
}
}
});
google.maps.event.addListener(myownpath, 'mouseover', function(e) {
var locs = {
lat: e.latLng.lat(),
lng: e.latLng.lng()
};
var myPosition1 = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
for (var i = 0; i < g_pathArray.length; i++) {
if (google.maps.geometry.poly.isLocationOnEdge(myPosition1, g_pathArray[i], 0.00001)) {
g_infoWindow = new google.maps.InfoWindow({
content: g_pathObjects[singlePath].name
});
g_infoWindow.setPosition(locs);
g_infoWindow.open(g_map);
break;
}
}
});
}
}#map {
height: 150px;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap&loading=async"></script>Use your own API Key.
4