I've used Javascript+HTLM to show user location and have created polygons on google maps API. My issue is with creating labels/textboxes displaying "User is in polygon" and "User is not in polygon". This example code creates a red dot if the point clicked is in the polygon, and a green dot if the point clicked is out of the polygon. Instead of red and green dots, I want to have "In polygon" "Out of polygon" displayed in a text box that I can then record into a database.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 24.886, lng: -70.269},
zoom: 5,
});
var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var resultColor =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&signed_in=true&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
I have also tried using this code which logs "True" or "False" in the console but again, not in a textbox.
google.maps.event.addListener(map, 'click', function(event) {
console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Big thanks for any and all help here.
I had a label called Label1 and used this code which writes true in the label if point is in the polygon or false if the point is out of polygon.
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById("Label1").innerHTML =google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle);
});
Related
I want google map like this Multiple Polyline, can Multiple select.
Multiple Polyline
var geocoder;
var map;
var polyline;
positions = [new google.maps.LatLng(37.441883,-122.143019),
new google.maps.LatLng(37.45296,-122.181725)];
function initialize() {
var 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
});
$("#chkRouteLines").click(function () {
if (!polyline || !polyline.setMap) {
polyline = new google.maps.Polyline({
path: positions,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
visible: true
});
}
if ($(this).is(':checked')) {
polyline.setMap(map);
} else {
polyline.setMap(null);
}
})
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 90%;
width: 100%;
margin: 0px;
padding: 0px
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />
you can google developers documents.For example this link:
https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
In researching the answer I've consulted the API documentation and example, many similar queries on stackflow and some Youtube examples but none are exactly what I'm looking to create and I can't fathom where I'm going wrong.
In this instance we wish the infowindow to appear by clicking within the defined border of the polygon, not by selecting a marker. I understand Googlemaps lets you do this as long as you give your infowindow a LatLng position.
What I can't understand is why the infowindow is not opening...
Please could you review code and let me know if you can spot anything obvious I'm missing. (Hope it's clear in the code notes but I'm looking to create many different are polygons across the same map)
<!DOCTYPE html>
<html>
<head>
<title>TBC</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<div id="map"style="width:800px;height:1200px;"></div>
<script>
var map;
function initMap() {{
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.247253, lng: 79.1},
zoom: 6,
mapTypeId: 'satellite'
});
//BEGINNING AREA CODE 1
// Define the LatLng coordinates for the polygon.
var hyderabadCoords = [
{lat:17.3876090549752,lng:78.5106470783611},
{lat:17.4637690550461,lng:78.5161870783663},
{lat:17.4391290550232,lng:78.4386270782939},
{lat:17.3876090549752,lng:78.5106470783611},
];
// Construct the polygon.
var hyderabadBorder = new google.maps.Polygon({
paths: hyderabadCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.0
});
hyderabadBorder.setMap(map);
//Content of infobox
var hyderLatLng = {lat: 17.39, lng: 78.50};
var contentString = "TBC"
var hyderinfowindow = new google.maps.InfoWindow({
content: contentString,
position:hyderLatLng
});
// Add a listener for the click event.
hyderabadBorder.addListener('click', showArrays);
hyderinfowindow = new google.maps.InfoWindow;
}
//END AREA CODE 1
//BEGINNING AREA CODE 2...(Repeat 1 with new area details)
//END ALL AREA CODES
/** #this {google.maps.Polygon} */
function showArrays(event) {
var vertices = this.getPath();
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
You have 2 issues:
you are overwriting the InfoBox that has the content in it with one that is empty:
hyderinfowindow = new google.maps.InfoWindow;
You are never calling hyderinfowindow.open(map);
function showArrays(event) {
hyderinfowindow.open(map);
}
proof of concept fiddle
code snippet:
var map;
function initMap() {
{
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17.247253,
lng: 79.1
},
zoom: 9,
mapTypeId: 'satellite'
});
// Construct the polygon.
var hyderabadBorder = new google.maps.Polygon({
paths: hyderabadCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.0
});
hyderabadBorder.setMap(map);
//Content of infobox
var hyderLatLng = {
lat: 17.39,
lng: 78.50
};
var contentString = "TBC"
var hyderinfowindow = new google.maps.InfoWindow({
content: contentString,
position: hyderLatLng
});
// Add a listener for the click event.
hyderabadBorder.addListener('click', showArrays);
}
//END AREA CODE 1
//BEGINNING AREA CODE 2...(Repeat 1 with new area details)
//END ALL AREA CODES
/** #this {google.maps.Polygon} */
function showArrays(event) {
hyderinfowindow.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
//BEGINNING AREA CODE 1
// Define the LatLng coordinates for the polygon.
var hyderabadCoords = [
{
lat: 17.3876090549752,
lng: 78.5106470783611
}, {
lat: 17.4637690550461,
lng: 78.5161870783663
}, {
lat: 17.4391290550232,
lng: 78.4386270782939
}, {
lat: 17.3876090549752,
lng: 78.5106470783611
},
];
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I have problems with geometry figures in google maps(circles and polygons), example: when i have two circles overlaid and I use the event mouse over or mouseout, google maps is only print the information of the circle more big , because the big figure is put after the small. i have the same problems if i have 7 circles or polygons almost in the same position.
This is a example with two circles, but the problem is in the combination of the figures.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 80%;
}
</style>
</head>
<body>
<div id="map"></div>
<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: 845837
},
chicago1: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
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: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
var cont=0;
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
text:'hola'+cont,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
title:'hola'+cont,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
optimized: false,
zIndex:10,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
cont++;
google.maps.event.addListener(cityCircle, 'mouseover', function(event) {
var lat = this.getCenter().lat();
var lon = this.getCenter().lng();
var lat2 = event.latLng.lat();
var lon2 = event.latLng.lng();
console.log(lat+lon+"Circulo"+this.text);
console.log(lat2+lon2+"mouse");
console.log(this.zIndex+"index"+this.text);
});
google.maps.event.addListener(cityCircle,'mouseout',function(event){
var lat = this.getCenter().lat();
var lon = this.getCenter().lng();
var lat2 = event.latLng.lat();
var lon2 = event.latLng.lng();
console.log(lat+lon+"Circulo"+this.text);
console.log(lat2+lon2+"mouse");
console.log(this.zIndex+"index"+this.text);
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwm19SMHtEZaXzloVeyMeMULkciJuatEo&signed_in=true&callback=initMap"></script>
</script>
</body>
</html>
You can't use mouseover/mouseout for that. You need to process through all your objects and determine whether the mouseevent is inside the object or not (for a circle the distance from the center is less than the radius, for a polygon the containsLocation method).
Example map mousemove listener:
google.maps.event.addListener(map, 'mousemove', function(event) {
var lat = event.latLng.lat();
var lon = event.latLng.lng();
for (var i = 0; i < areaArray.length; i++) {
if (areaArray[i].getRadius) {
// circle
if (google.maps.geometry.spherical.computeDistanceBetween(areaArray[i].getCenter(), event.latLng) < areaArray[i].getRadius()) {
console.log("in circle:"+event.latLng.toUrlValue(6) + "Circulo center="+areaArray[i].getCenter().toUrlValue(6)+" radius="+areaArray[i].getRadius()+" meters, " + areaArray[i].text);
// console.log(lat2 + lon2 + "mouse");
// console.log(this.zIndex + "index" + this.text);
}
}
}
});
proof of concept fiddle (for the circles in your example)
I want to map a route between two points on Google Maps with a polyline and overlay this with another "current distance travelled" polyline. Basically, if the distance between the two points is 100KM and the person has travelled 25KM I want to overlay a second polyline 25% of the route. I am finding it difficult to find even a formula to calculate what the coordinates of the point 25% along this route would be.
Is there any Google map functionality to do something like this, or a technique for calculating a point along a route, x% of the way.
Thanks in advance.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="v3_epoly.js"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(-27.46758, 153.027892)
];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#999999',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap(map);
//current location 2000 miles on route
var mar = flightPath.GetPointAtDistance(2000000);
var myLatlng = new google.maps.LatLng(mar.k, mar.D);
console.log(mar);
var marker = new google.maps.Marker({
position: mar,
map: map,
title: 'Current Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="height:100%; width:100%;"></div>
</body>
</html>
I want to create a circle using one click on the map, also i want to collect the Lat/Lon information of the circle and it's radius. Please suggest me how to do it using JavaScript.
Regards,
Madhu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// This example creates circles on the map with fixed radius of 5km
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.09024, -95.712891),//can use your center
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, "click", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
// Construct the circleOptions
var circleOptions = {
//optional to modify
/* strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,*/
map: map,
center: latLng,
radius: 5000 //in meters apporx.
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(circleOptions);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>