I have got rectangle bounds, used
map.getBounds();
Now I would like to calculate distance (in meters) between rectangle center and shorter middle point.
Already have some code:
var mapCenter = this.map.getCenter()
var mapBounds = this.map.getBounds();
var southEast = mapBounds.getSouthWest();
var middlePoint = ??;
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
But I don't know how to get shorter distance (from center) middle point.
The latitude of the "top" of the bounds is the northern latitude of the bounds: mapBounds.getNorthEast().lat(). The longitude of the center of the bounds is the longitude of the center of the bounds mapBounds.getCenter().lng()
(if you don't know which side is the "shorter" one, calculate both and use the shorter value)
var mapCenter = map.getCenter()
var mapBounds = map.getBounds();
var southEast = mapBounds.getSouthWest();
var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng());
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
proof of concept fiddle
code snippet:
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
});
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var mapCenter = map.getCenter()
var mapBounds = map.getBounds();
var rectangle = new google.maps.Rectangle({
map: map,
bounds: mapBounds
});
var southEast = mapBounds.getSouthWest();
var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng());
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
var circle = new google.maps.Circle({
center: mapCenter,
radius: radius,
map: map
});
var marker = new google.maps.Marker({
position: middlePoint,
map: map
});
var line = new google.maps.Polyline({
map: map,
path: [mapCenter, middlePoint]
});
document.getElementById('info').innerHTML = radius.toFixed(2);
map.setZoom(12);
});
}
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?libraries=geometry"></script>
<div id="info"></div>
<div id="map_canvas"></div>
Related
can someone help me? I am trying get width and height of rectangle the google maps api.
I'm doing it this way:
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (rectangle) {
//height
var height= google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().west)
);
//width
var width= google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().west)
);
});
You are calculating the wrong distance for the height (NorthEast corner to SouthWest corner). This:
//height
var height= google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().west)
);
Should be:
//height
var height= google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().east)
);
(or you could make both longitudes .west)
Note that the width will be different at the northern and southern edges if it appears as a rectangle in the map projection.
proof of concept fiddle
code snippet:
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var rectBounds = new google.maps.LatLngBounds();
var NW = map.getCenter();
var markerNW = new google.maps.Marker({
map: map,
position: NW,
label: "C",
title: NW.toUrlValue(6)
})
rectBounds.extend(map.getCenter());
var NE = google.maps.geometry.spherical.computeOffset(map.getCenter(), 100, 90);
var markerNE = new google.maps.Marker({
map: map,
position: NE,
label: "NE",
title: NE.toUrlValue(6)
});
rectBounds.extend(markerNE.getPosition());
var SW = google.maps.geometry.spherical.computeOffset(map.getCenter(), 100, 180);
var markerSW = new google.maps.Marker({
map: map,
position: SW,
label: "SW",
title: SW.toUrlValue(6)
})
rectBounds.extend(markerSW.getPosition());
var SE = google.maps.geometry.spherical.computeOffset(NE, 100, 180);
var markerSE = new google.maps.Marker({
map: map,
position: SE,
label: "SE",
title: SE.toUrlValue(6)
})
rectBounds.extend(markerSE.getPosition());
var rect = new google.maps.Rectangle({
map: map,
bounds: rectBounds
})
map.fitBounds(rectBounds);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['rectangle']
},
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
//height
var height = google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().east)
);
//width
var width = google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().west)
);
document.getElementById('dimensions').innerHTML = "height:" + height.toFixed(2) + " m<br>width:" + width.toFixed(2) + " m";
});
}
/* 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;
}
<div id="dimensions"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing,geometry&callback=initMap" async defer></script>
I managed to solve it like this:
// get the coordinates for the NE and SW corners
NE = rectangle.bounds.getNorthEast ();
SW = rectangle.bounds.getSouthWest ();
// from that, figure out the latitudes and the longitudes
lat1 = NE.lat ();
lat2 = SW.lat ();
lng1 = NE.lng ();
lng2 = SW.lng ();
// construct new LatLngs using the coordinates for the horizontal distance between lng1 and lng2
horizontalLatLng1 = new google.maps.LatLng (lat1, lng1);
horizontalLatLng2 = new google.maps.LatLng (lat1, lng2);
// construct new LatLngs using the coordinates for the vertical distance between lat1 and lat2
verticalLatLng1 = new google.maps.LatLng (lat1, lng1);
verticalLatLng2 = new google.maps.LatLng (lat2, lng1);
// work out the distance horizontally
width = google.maps.geometry.spherical.computeDistanceBetween (horizontalLatLng1, horizontalLatLng2);
// work out the distance vertically
height = google.maps.geometry.spherical.computeDistanceBetween (verticalLatLng1, verticalLatLng2);
https://duncan99.wordpress.com/2013/10/19/google-maps-size/
am new in java script, am sorry if Q stupid.
in my code i have a center position with lat and long , i hava another function to update the center position .
the problem: i want to change marker position from center position to new center position when call pan() function.
var panPoint;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
var marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.panTo(panPoint)
}
If you want to change the marker position also, you need to make the reference to it global (like you did with panPoint), define it outside of any functions, remove the var from in front of it inside your myMap function. Note that you also need to make map global as well, for the center to actually change.
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
Then move it when you call your pan function:
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
proof of concept fiddle
code snippet:
var panPoint;
var map;
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="32.224063" />
<input id="lng" value="35.230539" />
<input id="btn" type="button" onClick="pan();" value="pan" />
<div id="googleMap"></div>
I wrote a script to add maps to my website. It is as follows:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML code:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>
css:
#map{
width: 500px;
height: 400px;
}
I added this code for pin pointing a location:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
But when I used that code, map on my page disappeared. How can I make it to work?
You are creating map two time on same div that's why its happening just change your code as below:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
there is no need to add var map = new google.maps.Map(mapCanvas, mapOptions);
second time
I have implemented Google Maps API V3 on a page and for some reason the position of the mouse is off.
In the image, my mouse is in the red circle but the map thinks it's where the blue circle is.
This issue also affects the dragable points when using the directions service.
I build the map using the following:
var center = new google.maps.LatLng(53.42263, -7.9541);
var latlngbounds = new google.maps.LatLngBounds( );
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng( 53.42263, -7.9541 ),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var clusters = [];
var oms = new OverlappingMarkerSpiderfier(map);
var iw = new google.maps.InfoWindow();
var spiderIcon = new google.maps.MarkerImage (
'http://www.irishcottageholidays.com/images/cottage1.png',
new google.maps.Size(32,32),
new google.maps.Point(0,0),
new google.maps.Point(16,20)
)
oms.addListener('click', function(marker, event) {
load_content(map, marker, iw, marker.id)
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(spiderIcon);
}
iw.close();
});
for (var i = 0; i < data.locations.length; i++) {
var dataPhoto = data.locations[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
latlngbounds.extend( latLng );
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://www.irishcottageholidays.com/images/cottage1.png',
map: map,
id: dataPhoto.mID,
title: dataPhoto.name
});
clusters.push(marker);
oms.addMarker(marker);
}
var mcStyles = [
{
textColor: 'deeppink',
textSize: 18,
anchor: [17,0],
url: '/assets/cms/images/cottage_cluster.png',
height: 50,
width: 50
}
]
var mcOptions = {
styles: mcStyles,
gridSize: 5,
maxZoom: 15
}
var markerCluster = new MarkerClusterer(map, clusters, mcOptions);
map.fitBounds( latlngbounds );
There is an issue with Firefox 39.0 and v=3.exp.
issue 8278 in the issue tracker
I have in my code this
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var iconoMarca = "/assets/giftRayo.gif");
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconoMarca
});
}
}
but the marker doesn't appear and if I use a png or jpeg it works. What am I doing wrong?? Do the gif animations have another treatment?
As a standard, the markers use something called optimized rendering that always renders the markers as static. To see animated gifs you need to set optimized = false on your marker. The code for generating your marker would then be:
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: iconoMarca,
optimized: false
});
This should solve your problem.
Ps.:
You seem to have a small bug in your code:
var iconoMarca = "/assets/giftRayo.gif");
You should remove the ).