How do I create a grid in google maps api v3
Question
I'm new at this. What I'm trying to do is, created 2 markers (they are draggable), there will be grid between them, like http://prntscr.com/4nx9f3 . When I change one of the marker, grid should be changed. I am trying to draw with polylines. By the way i can not get latitude or longitute with marker1.getPosition().lat() . thanks for any help...
all my code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var marker1;
var marker2;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(50.3, 44.3)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(50.1, 44.1),
map: map,
draggable: true,
title: 'marker1 '
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(50.5, 44.5),
map: map,
draggable: true,
title: 'marker2'
});
var flightPlanCoordinates = [
marker1.getPosition(),
marker2.getPosition(),
];
// code below is not working
/*
google.maps.event.addListener(marker1, 'dragend', function () {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
});
google.maps.event.addListener(marker2, 'dragend', function () {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
*/
var polyline = new google.maps.Polyline(
{ path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var lat1 = marker1.getPosition().lat();
var lng1 = marker1.getPosition().lng();
var lat2 = marker2.getPosition().lat();
var lng2 = marker2.getPosition().lng();
// I tried to get distance between 2 markers but it did not work either
/* function distance(
lat1,
lng1,
lat2,
lng2
) {
var R = 6371;
var a =
0.5 - Math.cos((lat2 - lat1) * Math.PI / 180) / 2 +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
(1 - Math.cos((lon2 - lon1) * Math.PI / 180)) / 2;
return R * 2 * Math.asin(Math.sqrt(a));
}
*/
polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
3 answers
solution1
6 ACCPTED 2015-10-03 22:18:56
I think this is what you are trying to do. Changed your rectangleLng array to a two dimensional array and changed the excLat/excLng variables to not be rounded (they were backwards as well extLat wants to be up/down, excLng should be side to side).
code snippet:
var map; var marker1; var marker2; var rectangle; var infowindow = new google.maps.InfoWindow(); function initialize() { var mapOptions = { zoom: 11, center: new google.maps.LatLng(38.4, 26.7) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); marker1 = new google.maps.Marker({ position: new google.maps.LatLng(38.3, 26.6), map: map, draggable: true, title: 'marker1' }); google.maps.event.addListener(marker1, 'click', function(evt) { infowindow.setContent(marker1.getPosition().toUrlValue(6)); infowindow.open(map, this); }); marker2 = new google.maps.Marker({ position: new google.maps.LatLng(38.5, 26.8), map: map, draggable: true, title: 'marker2' }); google.maps.event.addListener(marker2, 'click', function(evt) { infowindow.setContent(marker1.getPosition().toUrlValue(6)); infowindow.open(map, this); }); rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: new google.maps.LatLngBounds( marker1.getPosition(), marker2.getPosition()) }); var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100; var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100; google.maps.event.addListener(marker1, 'dragend', function() { rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition())); leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100; makeGrid(); }); google.maps.event.addListener(marker2, 'dragend', function() { rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition())); belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100; makeGrid(); }); makeGrid(); } var rectangleLat = []; var rectangleLng = []; function makeGrid() { for (x in rectangleLng) { for (y in rectangleLng[x]) { if (rectangleLng[x][y].setMap) { rectangleLng[x][y].setMap(null) rectangleLng[x][y] = null; } } } var leftSideDist = marker2.getPosition().lng() - marker1.getPosition().lng(); var belowSideDist = marker2.getPosition().lat() - marker1.getPosition().lat(); var dividerLat = 5; var dividerLng = 5; //ilerde kullanıcıdan alınacak var excLat = belowSideDist / dividerLat; var excLng = leftSideDist / dividerLng; var m1Lat = marker1.getPosition().lat(); var m1Lng = marker1.getPosition().lng(); var m2Lat = marker2.getPosition().lat(); var m2Lng = marker2.getPosition().lng(); document.getElementById('info').innerHTML += "dividerLat=" + dividerLat + ", excLat=" + excLat + "<br>"; document.getElementById('info').innerHTML += "dividerLng=" + dividerLat + ", excLng=" + excLng + "<br>"; document.getElementById('info').innerHTML += "m1=" + marker1.getPosition().toUrlValue(6) + "<br>"; document.getElementById('info').innerHTML += "m2=" + marker2.getPosition().toUrlValue(6) + "<br>"; for (var i = 0; i < dividerLat; i++) { if (!rectangleLng[i]) rectangleLng[i] = []; for (var j = 0; j < dividerLng; j++) { if (!rectangleLng[i][j]) rectangleLng[i][j] = {}; rectangleLng[i][j] = new google.maps.Rectangle({ strokeColor: '#FFFFFF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.1, map: map, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(m1Lat + (excLat * i), m1Lng + (excLng * j)), new google.maps.LatLng(m1Lat + (excLat * (i + 1)), m1Lng + (excLng * (j + 1)))) }); document.getElementById('info').innerHTML += "[i=" + i + ",j=" + j + "]:" + rectangleLng[i][j].getBounds() + "<br>"; } //for j Lng } //for i Lat document.getElementById('left').value = leftSideDist; document.getElementById('blw').value = belowSideDist; } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; /* border: 1px solid #999;*/ }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div> <div id="panel" style="margin-left:-320px">leftSideDist: <input type="text" readonly id="left">belowSideDist: <input type="text" readonly id="blw"> </div> <div id="info"></div>
solution2
0 2014-09-18 11:24:47
To get the coordinates of the marker after it's been dragged, change:
google.maps.event.addListener(marker1, 'dragend', function() {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
});
to:
google.maps.event.addListener(marker1, 'dragend', function(event) {
polyline.LatLngBounds(event.latLng);
});
However , there is no LatLngBounds function on the polyline object.
solution3
0 2014-09-22 07:11:34
As far as i done:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false&v=3&libraries=geometry"></script>
<script>
var map;
var marker1;
var marker2;
var rectangle;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(38.4, 26.7)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(38.3, 26.6),
map: map,
draggable: true,
title: 'marker1'
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(38.5, 26.8),
map: map,
draggable: true,
title: 'marker2'
});
rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
marker1.getPosition(),
marker2.getPosition())
});
var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
google.maps.event.addListener(marker1, 'dragend', function () {
rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
});
google.maps.event.addListener(marker2, 'dragend', function () {
rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
});
var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
var dividerLat = 5;
var dividerLng = 5; //ilerde kullanıcıdan alınacak
var excLat = leftSideDist / dividerLat;
var excLng = belowSideDist / dividerLng;
var rectangleLat[];
var rectangleLng[];
var m1Lat = marker1.getPosition().lat();
var m1Lng = marker1.getPosition().lng();
var m2Lat = marker2.getPosition().lat();
var m2Lng = marker2.getPosition().lng();
for (var i = 0; i < dividerLat; i++) {
for (var j = 0; j < dividerLng; j++) {
rectangleLng[i*5+j] = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
( m1Lat , (excLng*(j+1) ) ),
( m1Lat+excLat, m2Lng+(excLng*(j+1) ) ) )
});
}//for j Lng
}//for i Lat
document.getElementById('left').value = leftSideDist;
document.getElementById('blw').value = belowSideDist;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel" style="margin-left:-320px">
leftSideDist: <input type="text" readonly id="left">
belowSideDist: <input type="text" readonly id="blw">
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do create clickable icons in google maps api v3?
How do I limit panning in Google maps API V3?
How do I highlight a country with the google maps api v3?
How do i show places, in google maps api v3 and google places api, between two points?
How do you create a Marker with a custom icon for google maps API v3?
How do I do a simple zip code map showing boundaries with Google Maps API V3?
How do I zoom my map using Google Maps API v3 when I click a hyperlink?
How do I build something like this in Google Maps V3 API?
How do I center an image anchor in google maps api V3?
Google Maps API v3: How do I dynamically change the marker icon?
Related Tags