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>
Related
I have a Google Maps API file I'm trying to draw polylines and polygons in. However when I input the code for drawing these, I get an error in Google Chrome saying 'Uncaught SyntaxError: Unexpected end of input' for my closing script bracket (< /script>).
Here is my code:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: {lat: 39.8283, lng: -98.5795},
zoom: 5
});
// Define the LatLng coordinates for the polygon's path.
var sampleCounty = [
{lat: 32.344437, lng: -86.496774},
{lat: 32.402814, lng: -86.717897},
{lat: 32.340803, lng: -86.814912},
];
// Construct the polygon.
var samplePolygon = new google.maps.Polygon({
paths: sampleCounty,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
//place polygon in map
samplePolygon.setMap(map);
//make HTML element change color when polygon is hovered over
google.maps.event.addListener(samplePolygon, 'mouseover', function (event) {
document.getElementById("sampleDescription").style.color = "blue";
});
//make HTML element change color when polygon is not hovered over
google.maps.event.addListener(samplePolygon, 'mouseout', function (event) {
document.getElementById("sampleDescription").style.color = "red";
});
</script><!--end google maps API-->
<!--api link here--><script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete" async defer></script>
In my code my API key is there. Does anyone know why this is happening/how to fix it?
There are two issues with your code:
missing close } on the initMap function (causes Uncaught SyntaxError: Unexpected end of input error).
&callback=initAutocomplete in the script include (causes "initAutocomplete is not a function" error), there is no initAutocomplete function in your code, that should be initMap.
If I change those and add the required HTML/CSS, it works.
working code snippet: (note I also changed the center and zoom so you can see the polygon)
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: {
lat: 32.402814,
lng: -86.717897
},
zoom: 10
});
// Define the LatLng coordinates for the polygon's path.
var sampleCounty = [{
lat: 32.344437,
lng: -86.496774
},
{
lat: 32.402814,
lng: -86.717897
},
{
lat: 32.340803,
lng: -86.814912
},
];
// Construct the polygon.
var samplePolygon = new google.maps.Polygon({
paths: sampleCounty,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
//place polygon in map
samplePolygon.setMap(map);
//make HTML element change color when polygon is hovered over
google.maps.event.addListener(samplePolygon, 'mouseover', function(event) {
document.getElementById("sampleDescription").style.color = "blue";
});
//make HTML element change color when polygon is not hovered over
google.maps.event.addListener(samplePolygon, 'mouseout', function(event) {
document.getElementById("sampleDescription").style.color = "red";
});
}
#map {
height: 100%;
width: 100%;
}
body,
html {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
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>
I am currently trying to create a program that increases the opacity of a polygon every 2 seconds until its non-transparent. I eventually want to do this with multiple polygons to relay data to the user over time, but I am simply trying to get one polygon to work. The code is written in Javascript and uses the timeout function to do so.
The code is supposed to draw a red square one the map with opacity 0.1, then 2 seconds later draw a similar square with opacity at 0.2. This process goes on until the opacity is equal to 1. The problem is that the program skips the first 9 squares (where opacity < 1) and draws the final square (opacity = 1). I believe that there may be a problem with how I am doing my delay.
Below is my sample code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#map {
height: 100%;
}
#tabs{
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'
});
for(i = 0.1; i < 1; i+=0.1){
setTimeout(function(){
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: i,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
}, 1000+i*20000)
}
}
</script>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I slightly modified your code and implemented it with setInterval() function. Also please note that there is no need to create new instance of polygon inside a loop, you can just change polygon options.
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'
});
var m_opacity = 0.1;
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: m_opacity,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
var m_timer = window.setInterval(function(){
m_opacity += 0.1;
if (m_opacity <= 1.0) {
rectangle.setOptions({
fillOpacity: m_opacity
});
}
if (m_opacity === 1.0) {
window.clearInterval(m_timer);
}
}, 2000);
}
#map {
height: 100%;
}
#tabs{
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initMap"></script>
You can see this sample on jsbin as well: http://jsbin.com/yepagec/edit?html,output
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 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>