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>
Related
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'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);
});
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>
I wanted to create the arrow directed polyline using google map. I'm able to connect through line. But i wanted to draw line in arrow ended.
My code is
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 5
//center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.clearOverlays();
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
offset: '100%'
}],
strokeWeight: 3
};
lineCoordinates= new google.maps.Polyline(polyOptions);
lineCoordinates.setMap(map);
}
function placeMarker(mapLoc,address,infoDlgString){
map.setCenter(mapLoc);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: address,
position: mapLoc
});
var infowindow = new google.maps.InfoWindow({
content:infoDlgString
});
infowindow.open(map,marker);
}
function getAddressDetail(address2,infoDlgString){
geocoder.geocode( { 'address': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
map.setCenter(results2[0].geometry.location);
placeMarker(results2[0].geometry.location,address2,infoDlgString);
var path = lineCoordinates.getPath();
path.push(results2[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status2);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You haven't specified a path for your polyline to follow. So Google doesn't know what to plot. Once you add a path of multiple latlngs in your polyOptions variable, the line should appear with the correct arrow head end. This works for me:
<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(54.57723, -2.79748);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#FF0000',
strokeOpacity: 1.0
};
var polyline = new google.maps.Polyline({
path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
strokeColor: "#000000",
strokeOpacity: 0.5,
strokeWeight: 4,
map: map,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also note that there is no strokeColor or strokeOpacity properties in the IconSequence object. These are on the Symbol object instead.