I'm using tomchentw/react-google-maps integration component, in according with Maps JavaScript API, I've try to put inside paths prop of Polygon component an array of outerCoords and InnerCords, to show holes inside polygon:
props.zones.value.data.map( () => {
var outerCoords = [
{lat: -32.364, lng: 153.207}, // north west
{lat: -35.364, lng: 153.207}, // south west
{lat: -35.364, lng: 158.207}, // south east
{lat: -32.364, lng: 158.207} // north east
];
var innerCoords1 = [
{lat: -33.364, lng: 154.207},
{lat: -34.364, lng: 154.207},
{lat: -34.364, lng: 155.207},
{lat: -33.364, lng: 155.207}
];
var innerCoords2 = [
{lat: -33.364, lng: 156.207},
{lat: -34.364, lng: 156.207},
{lat: -34.364, lng: 157.207},
{lat: -33.364, lng: 157.207}
];
return (
<Polygon
key={zone.id}
paths={[outerCoords, innerCoords1, innerCoords2]}
onClick={props.onMapClick}
/>
);
})
The result is a polygon with inside other polygons, not holes.
Did somebody else find this issue?
The Google Maps JavaScript API documentation says the following:
To create an empty area within a polygon, you need to create two paths, one inside the other. To create the hole, the coordinates defining the inner path must be in the opposite order to those defining the outer path. For example, if the coordinates of the outer path are in clockwise order then the inner path must be counter-clockwise.
https://developers.google.com/maps/documentation/javascript/shapes#polygon_hole
In your example you should change the order for inner paths:
<Polygon
key={zone.id}
paths={[outerCoords, innerCoords1.reverse(), innerCoords2.reverse()]}
onClick={props.onMapClick}
/>
Proof of concept
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -34.198173, lng: 151.677246},
});
var outerCoords = [
{lat: -32.364, lng: 153.207}, // north west
{lat: -35.364, lng: 153.207}, // south west
{lat: -35.364, lng: 158.207}, // south east
{lat: -32.364, lng: 158.207} // north east
];
var innerCoords1 = [
{lat: -33.364, lng: 154.207},
{lat: -34.364, lng: 154.207},
{lat: -34.364, lng: 155.207},
{lat: -33.364, lng: 155.207}
];
var innerCoords2 = [
{lat: -33.364, lng: 156.207},
{lat: -34.364, lng: 156.207},
{lat: -34.364, lng: 157.207},
{lat: -33.364, lng: 157.207}
];
// Construct the polygon, including both paths.
var bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords1.reverse(), innerCoords2.reverse()],
strokeColor: '#FFC107',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC107',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
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&callback=initMap">
</script>
I hope this helps!
Related
I need to cover some city by using some color, in some area. I am using google maps API, can give me some idea how to solve this?
Example:
You can construct a polygon using the Polygon class.
Simple example from google provided.
The paths property can take an array of arrays to create multiple polygons.
See the full example here: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
And documentation: https://developers.google.com/maps/documentation/javascript/reference/polygon
Eg:
var triangleCoords = [
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
],
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
]
];
Hope that helps.
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</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 src="index.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I am having an intermittent issue where my Google Map will not load upon initially loading the webpage, causing a blank map. On refresh it will load without issue.
This is the error message I am getting in the Chrome console:
message: "initMap is not a function"
name: "InvalidValueError"
HTML for my map:
<div class="container-fluid">
<div id="map"> </div>
</div>
JavaScript:
function initMap() {
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: uluru,
//disableDefaultUI: true,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var triangleCoords = [
{lat: 28.0990114, lng: -82.0035785}, //Kathleen Rd - Lakeland
{lat: 28.0186323, lng: -82.11286410000002}, //Plant City
{lat: 27.8953038, lng: -81.97341719999997}, //Mulberry
{lat: 27.8964147, lng: -81.84313739999999}, //Bartow
{lat: 27.9014133, lng: -81.58590989999999},//Lake Wales
{lat: 28.1141841, lng: -81.61785359999999}, //Haines City
{lat: 28.1825147, lng: -81.8239676} //Polk City
];
var expressCoverage = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#333333',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#333333',
fillOpacity: 0.2
});
expressCoverage.setMap(map);
}
I've cleared the cache in my browser with no effect on the issue. The problem persists in Chrome, Mozilla and Mobile Safari. Could something be happening with the API Key when the map is not loading?
Perhaps the 'InvalidValueError' is arising because you aren't declaring 'uluru' with the correct format. Coordinates in the Google Maps API need to be in LatLng form. Try replacing
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
with
var uluru = new google.maps.LatLng(28.0394654, -81.94980420000002);
How do I add infoWindows to all the markers on this Google Marker Clustering map?
Below find code sample of Market Clustering without the infoWindows
This is simple Javascript with the Google Map API.
I need a info window with a link.
the var locations will be generated by php and mysql
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
</body>
</html>
I'm using squarespace to build my website and want to insert a custom map from google maps javascript api. I've followed tutorial from W3school and from Google's own tutorial to build my map and follow steps as below :
What I'm trying to archive is a map like this
google map example
Step 1: Insert a embed block for html
<div id= "map"></div>
Step 2: insert javascript in page header
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var 10th = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var 10th = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
10th.setMap(map);
}
</script>
Step 3 : in custom css section
#googleMap {
width: 100%;
height: 380px;
}
But so far, I got either a blank page once javascript injected or error page (with code visible on top of the page... )
Here the link to my webpage on SquareSpace https://handa-cheng-a3wm.squarespace.com/1starrondissement
Thanks !
You have few typos in your code:
var 10th = [...] // invalid variable name
^---
Variables names in JavaScript must not begin with numbers. And you have defined the function but didn't run it.
You have not set height for #map in css.
<div id= "map"></div>
#googleMap { // <== this is not correct id as used in html above
width: 100%;
height: 380px;
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var points = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
}
initMap();
#map {
height: 300px;
}
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>
I'm trying to code 2 independent snapped-to-road polygons created from 2 different arrays of lat lon points. When I change the code to only do one polygon, it looks great. But when I change the code to do both polygons, I get different polygons than I had seen when I had done one at a time. Also, I've noticed that the 2nd polygon no longer snaps-to-roads like it should and like I've seen when only coding for one polygon.
I'm pretty confused by this.. It seems like the JS API is struggling to put the polygon together and snap to roads. Is it too many lat/lon points?
I appreciate any and all help. Please don't hesitate to ask if I'm not providing enough info.
Here is my code:
<script>
function initMap() {
var pos = {lat: 29.744860,lng: -95.361302};
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
roadTrip1 = [
{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination:
roadTrip1[j+1],travelMode:
google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714},
{lat: 29.753679, lng: -95.354992},
{lat: 29.770151, lng: -95.350105},
{lat: 29.813047, lng: -95.399361},
{lat: 29.780510, lng: -95.501962},
{lat: 29.731015, lng: -95.501280},
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},
{lat: 29.693119, lng: -95.413344},
{lat: 29.701318, lng: -95.374242},
{lat: 29.704807, lng: -95.374714}
];
var traceroadtrip2 = new google.maps.Polygon({
path: roadtrip2,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
service2.route({origin: roadtrip2[j],destination: roadtrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceroadtrip2.setPath(snap_path2);
}
});
}
};
window.onload = function() { initMap();};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>
Your code is getting status OVER_QUERY_LIMIT and silently failing, if you add an alert when it fails, you will see the failures:
if(status == google.maps.DirectionsStatus.OK) {
//...
} else alert("directions service 2 failed:"+status);
fiddle with added alert code
modify your code to handle the query limit, see this related question:
OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? (regarding the geocoder, but a similar strategy will work for the directions service)