getBounds().contains returning false

getBounds().contains returning false - javascript

I want the marker to be detected and display a value that is assigned to a rectangle. Through research, I found this, but it is not applicable in my case as I only need a latlong point. I have found something similar to what I want and tried it out, which is here
But it does not seem to work in my case.
I have a rectangle below:
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
And I tried to insert a point, which is -37.822545, 145.035526, and this point is within the rectangle, and it is supposed to return true but it wasn't.
Here is my JSfiddle

Looks like the LatLngLiteralBounds input for google.maps.Rectangle is broken. It creates a rectangle with north and south reversed. With your original rectangle (north: -37.822802, south: -37.822260), I get:
NE1:-37.822802,145.03601 (north=-37.822802, incorrect)
SW1:-37.82226,145.035324 (south=-37.82226, incorrect)
Whereas if I create the rectangle with a google.maps.LatLngBounds object, I get:
NE2:-37.82226,145.03601 (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)
proof of concept fiddle
(blue markers are NE/SW of rectangle2, red markers are NE/SW of rectangle1.)
someone should create an issue in the issue tracker
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
var rectangle2 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-37.822802, 145.035324), // SW
new google.maps.LatLng(-37.822260, 145.036010)) // NE
});
var marker = new google.maps.Marker({
map: map,
position: {
lat: -37.822545,
lng: 145.035526
},
title: "-37.822545, 145.035526"
});
var NEmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getNorthEast(),
title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()
});
var SWmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getSouthWest(),
title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()
});
var NEmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getNorthEast(),
title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
var SWmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getSouthWest(),
title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
map.fitBounds(rectangle1.getBounds());
console.log(rectangle1.getBounds().toUrlValue());
console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue());
console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue());
document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(marker.getPosition().toUrlValue());
console.log(rectangle2.getBounds().toUrlValue());
console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue());
console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue());
console.log(rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
}));
document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(rectangle2.getBounds().contains(marker.getPosition()));
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 95%;
width: 100%;
}
<div id="contains"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

I think you just mixed up your north and south parameters. (A larger negative latitude number is further south than a smaller one)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
south: -37.822802, // This is further south ...
north: -37.822260, // than this
east: 145.036010,
west: 145.035324
}
});
alert(rectangle1.getBounds());
alert(rectangle1.getBounds().contains({lat:-37.822545, lng:145.035526}));
}
With north and south switched like this, the js-fiddle returns true.

Related

How to set center and zoom drawing a flight path through a google map api (Js & php)

I am drawing a flightPath in my web application using GOOGLE MAPS API. I have to draw this path between two geo points, each geo point hast its own latitude and longitude value. Since I am new to google APIS I need an advice how can I set zoom and center of GOOGLE MAP? so that it can properly be viewed in a web view. Initially, I am using API in this way
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>},
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: {lat: <?= $to_lat ?>, lng: <?= $to_lng ?>}
});
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: {lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}
});
var flightPlanCoordinates = [
{lat: <?= $to_lat ?>, lng: <?= $to_lng ?>},
{lat: <?= $from_lat ?>, lng: <?= $from_lng ?>}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap(map);
}
The result is showing following out put
I need this zoom level could be fair enough so that I could be visible on mobile screens properly. As I an increasing the zoom it is pulling the map to the center( as I have set up under the zoom).
Advice Required
How can I define center between two points?
How to set zoom level?

You can try using the LatLngBounds class to which you add any/all latlng coordinates you wish to include before calling the fitBounds method.
function initMap() {
var points={
to:{
lat:<?= $to_lat ?>,
lng:<?= $to_lng ?>
},
from:{
lat:<?= $from_lat ?>,
lng:<?= $from_lng ?>
}
}
var bounds = new google.maps.LatLngBounds();
var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: latlng,
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var latlng=new google.maps.LatLng( points.to.lat, points.to.lng );
bounds.extend( latlng );
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: latlng
});
var latlng=new google.maps.LatLng( points.from.lat, points.from.lng );
bounds.extend( latlng );
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: latlng
});
var flightPlanCoordinates = [
{lat: points.to.lat, lng: points.to.lng },
{lat: points.from.lat, lng: points.from.lng }
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap( map );
map.fitBounds( bounds );
}
or, a slightly simplified version of the above
function initMap() {
var points={
from:new google.maps.LatLng( <?= $from_lat ?>,<?= $from_lng ?> ),
to:new google.maps.LatLng( <?= $to_lat ?>,<?= $to_lng ?> )
}
var bounds = new google.maps.LatLngBounds();
bounds.extend( points.to );
bounds.extend( points.from );
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: points.from,
mapTypeId: 'terrain'
});
var iconBase = 'https://image.ibb.co/ieFup6/pin.png';
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
marker1 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: points.to
});
marker2 = new google.maps.Marker({
map: map,
icon: iconBase,
draggable: true,
position: points.from
});
var flightPlanCoordinates = [
points.to,
points.from
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#504e60',
strokeOpacity: 0,
strokeWeight: 3,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap( map );
map.fitBounds( bounds );
}

Adding Text inside SVG icon for Google Maps API

I'm trying to create a custom Google Maps icon using SVG. I've gotten this far. However, all information online about SVG that I can find uses this kind of notation: <> <>.
I'm trying to do the SVG inside a JS object. Can anyone help me by telling me what this type of SVG is called so I can find somewhere to learn it?
My goal is to be able to add text inside the circle, but right now my text element does not work. Thank you!
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
strokeWeight: 1,
scale: .5,
text: "57"
}

If you want to add a single character inside your SVG marker, that is supported natively by the Google Maps Javascript API v3 Marker (a "labelled marker".
Related question if you want multiple characters: Google maps Marker Label with multiple characters
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.405, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
strokeWeight: 1,
scale: .5,
text: "57"
},
label: "B"
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

To add custom markers to google maps:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922}
});
//define your marker
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 1,
strokeColor: 'gold',
strokeWeight: 14
};
//put the marker on the map
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: goldStar,
map: map
});
var contentString = '<div id="content">'+
'lorem ipsum </div>'
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
for SVG reference you can see here
here's a Plunker if you want play around: https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview

Remove Polygon On Second Click

When the user clicks on the marker the first time I want a polygon to appear. The second time they click the polygon should disappear. This code works fine for the appearing part but it does not remove the polygon from the map. Every odd click just makes the polygon darker.
body onload="initMap()">
<p id="instructions"></p>
<div id="map" style='overflow:hidden;height:500px;width:500px;'></div>
<script type="text/javascript">
function initMap() {
var myOptions = {zoom:11,center:new google.maps.LatLng(37.55020520861464,126.98140242753904),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map'), myOptions);
document.getElementById("myButton").addEventListener("click", function() {
initMarker();
myTimer();
});
}
function initMarker() {
var t1 = 1;
marker1 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.55020520861464,126.98140242753904)});
marker2 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.558816, 126.908212)});
marker3 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.580107, 127.056797)});
marker4 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.446290, 126.862625)});
marker5 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.435041, 126.999528)});
marker6 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.522926, 126.853862)});
marker1.addListener('click', function() {
var triangleCoords = [
{lat: 37.550, lng: 123.9814},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
var triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
if (t1 == 1) {
triangle1.setMap(map);
t1 = 2;
}
else {
triangle1.setMap(null);
t1 = 1;
}
});
}
</script>
<div><button id="myButton">Start</button></div>
<div id="timer"></div>
<p id="explain"></p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'
async defer ></script>
</body>

Try moving the new polygon inside the if statement. I think, when ever you evoke that function it makes a new instance of triangle1, that's why when you try to remove polygon it deletes the new instance of "var triangle1" (which wasn't drawn to to map yet) rather than the one on the map. (sorry about the English)
marker1.addListener('click', function() {
var triangleCoords = [
{lat: 37.550, lng: 123.9814},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
if (t1 == 1) {
var triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
triangle1.setMap(map);
t1 = 2;
}
else {
triangle1.setMap(null);
t1 = 1;
}
});

One option (from Removing Rectangle from Map, slightly modified...
define the triangle1 variable outside the scope of the click listener
check if the triangle1 object exists and has a .setMap method.
if it does, set it's map property to null (the polygon is currently displayed), hide it, and set it to null.
if it doesn't exist, or doesn't have a .setMap method, create the marker.
var map;
function initMap() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(37.55020520861464, 126.98140242753904),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
document.getElementById("myButton").addEventListener("click", function() {
initMarker();
});
}
function initMarker() {
marker1 = new google.maps.Marker({
map: map,
title: "marker 1",
position: new google.maps.LatLng(37.55020520861464, 126.98140242753904)
});
var triangle1;
marker1.addListener('click', function(evt) {
if (triangle1 && triangle1.setMap) {
triangle1.setMap(null);
triangle1 = null;
} else {
var triangleCoords = [{
lat: 37.550,
lng: 123.9814
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}, {
lat: 25.774,
lng: -80.190
}];
triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
<button id="myButton">Start</button>
</div>
<div id="timer"></div>
<p id="explain"></p>
<div id="map"></div>

Add new polygon below everything in Google Maps API

I have a Google.Map object with a set of polygons and polylines already being displayed on that.
I want to add a new google.maps.Polygon object that should be displayed below all elements (more or less like a "background" polygon).
I tried to add it with an absurd low zIndex value (-999999), but it still is displayed above all other elements.
This is what I have done so far:
whiteBackground = new google.maps.Polygon({
path: [ {lat:40.1, lng:-97.1},
{lat:40.1, lng:-89.8},
{lat:44.5, lng:-89.8},
{lat:44.5, lng:-97.1} ],
strokeColor: "#FF0000",
fillColor: "#FFFFFF",
strokeOpacity: 1.0,
strokeWeight: 1.5,
fillOpacity: 1.0,
zIndex: -999999
});
// add to map and to list
whiteBackground.setMap(my_map);
Is there a way to force new polygon whiteBackground to have the smallest zIndex value in the Google.Map in which it is going to be add?
Or there is an way to iterate over all current elements in a Google.Map object?

It works if you set the zIndex properties of all the polygons.
proof of concept fiddle (moves smaller polygon above/below larger polygon on click of the button)
code snippet:
// This example creates a simple polygon representing the Bermuda Triangle and a small polygon that starts above it, toggles above/below by clicking the button (large polygon has zIndex=0; small polygon is +/-1.
var map;
var infoWindow;
var poly2;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [{
lat: 25.774,
lng: -80.190
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
zIndex: 0
});
bermudaTriangle.setMap(map);
var poly2Coords = [{
lat: 26.78484736105119,
lng: -72.24609375
}, {
lat: 27.059125784374068,
lng: -68.8623046875
}, {
lat: 23.926013339487024,
lng: -71.806640625
}];
poly2 = new google.maps.Polygon({
paths: poly2Coords,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
zIndex: 1
});
poly2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<input id="btn" type="button" value="click" onclick="if (poly2.get('zIndex') > 0) poly2.setOptions({zIndex:-1}); else poly2.setOptions({zIndex:1});" />
<div id="map"></div>

How to place multiple markers and draw route in google map api

I have lat, lng json in one variable
var path = [{"lat":"12.9247903824","lng":"77.5806503296"},{"lat":"10.9974470139","lng":"76.9459457397"}]
and I have created path from the lat lng values
var marker = new google.maps.Marker({
position: pos,
map: map
});
var flightPath = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
bounds: map.getBounds()
});
It is created path from the points. But Only one marker is showing. For that marker have to be shown in all points(path).
and one more, I want to get the address of all lat,lng values

you have to cast your points to google.maps.latLng Points:
var pointsPath = [new google.maps.LatLng(12.9247903824,77.5806503296),new google.maps.LatLng(10.9974470139,76.9459457397)];
Then initialize the map like this:
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var flightPath = new google.maps.Polyline({
path: pointsPath,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope It helps

Develop Reference

JavaScript is the programming language of the Web.

getBounds().contains returning false - javascript

Related

How to set center and zoom drawing a flight path through a google map api (Js & php)

Adding Text inside SVG icon for Google Maps API

Remove Polygon On Second Click

Add new polygon below everything in Google Maps API

How to place multiple markers and draw route in google map api

Categories

Resources