I am using Google Maps API JavaScript. My use case is I need to plot coordinates (lat, lng) on maps (create markers) and join them through polyline. The co-ordinates will be very close to each other so when I try to plot them, they get hidden behind the first marker. So I find out the center and try to zoom so that all markers will be visible on the map.
I used bounds to find the center but I am not able to zoom it to center co-ordinate. I used map.fitBounds(latlng); It fits the coordinate on the screen.
But what I want to achieve is to make polyline (connecting all co-ordinate) always horizontal and zoom it to center co-ordinate.
enter code herevar bounds = new google.maps.LatLngBounds();
for (i = 0; i < temp.length; i++) {
bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);
As the coordinate will always be different, The polyline will be in any direction, but I always want to show it horizontally on the map.
what I get :
enter image description here
what i want to acheive:
enter image description here
Any suggestion will be appreciated.
Thanks in Advance.
I achieve something like this by using the following:
Use computeHeading() function of Geometry library to get the angle from your first to your last coordinate on the line. Make sure to add &libraries=geometry to your Maps JS script tag.
Once you get the heading, you can use the map.setHeading() function to change the angle of your view and after some testings,I can see that you can achieve the horizontal view by subtracting it to 90 degrees.
Here's the sample code and code snippet below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.756795,
lng: -73.954298
},
zoom: 16,
tilt: 47.5,
mapId: "90f87356969d889c",
});
//array of your points
const markerCoordinates = [
{ lat: 40.758481, lng: -73.958269 },
{ lat:40.754649, lng: -73.949563 },
];
//creating marker from your points
for (let i = 0; i < markerCoordinates.length; i++) {
const marker = markerCoordinates[i];
new google.maps.Marker({
position:marker,
map,
});
}
//creating polyline from your points
const createdPolyline = new google.maps.Polyline({
path: markerCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
createdPolyline.setMap(map);
//get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
markerCoordinates[0],
markerCoordinates[1]
)
//once you get the heading subtract it by 90 to get a horizontal view
map.setHeading(heading-90)
}
I'm trying to make an application that tells me if a coordinate is contained in a circle.
for that every time I click on a point on the map a I get the coordinate.I would like to know if that new coordinate is contained within the circle or not
I would also like to know how I can make a circle occupy 5 meters around from a coordinate. in my example the radius is: 50000 but I do not know how to perform the conversion to set the value in meters.
this is my code:
http://plnkr.co/edit/OI4sjcuS526rFYxPnvDv?p=preview
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:4.624335 , lng: -74.063644 },
zoom: 5,
});
//circle coordinates
var circle = new google.maps.Circle({
map: map,
radius: 50000,
fillColor: '#FFFFFF',
opacity:0,
center:{lat:4.624335 , lng: -74.063644 }
});
google.maps.event.addListener(map, 'click', function(e) {
//I get new coordinates ( e.latLng)
});
}
thanks!
Updated
They have marked this question as a duplicate, with this solution
(http://jsfiddle.net/kaiser/wzcst/embedded/result/)
but it does not really satisfy my problem, because as you can see in the image, the solution fails.
As from what I have understood in your question, what your'e trying to do is
display the map
create a circle in map
upon clicking in the map,
determine if the point is outside or inside the circle
There is a post about this here in SO: Check if a latitude and longitude is within a circle google maps. If you check on the accepted answer (credits to Guffa for the genius algorithm), he used this function to check if the point is within the radius:
// credits to user:69083 for this specific function
function arePointsNear(checkPoint, centerPoint, km) {
var ky = 40000 / 360;
var kx = Math.cos(Math.PI * centerPoint.lat / 180.0) * ky;
var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
return Math.sqrt(dx * dx + dy * dy) <= km;
}
Now as for what you are trying to achieve, you could just simply add this inside your click event. Here's what I did:
google.maps.event.addListener(map, 'click', function(event) {
var click = event.latLng;
var locs = {lat: event.latLng.lat(), lng: event.latLng.lng()};
var n = arePointsNear(user, locs, diameter);
Then I added the condition that if the function returns true, the marker will have a label "I" (short for inside).
if(n){
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"I", //marking all jobs inside radius with I
color:"white"
}
});
Then if it didn't, the marker will then be marked "O" (short for outside)...
}else{
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"O", //marking all jobs outside radius with O
color:"white"
}
});
}
});
Here's the sample application that I have created, just in case you want to see it in action:
http://jsbin.com/hujusod/edit?js,output
This is a possible duplicate of Check if a latitude and longitude is within a circle google maps
. Or How To Display Content Based on Closest Lat/Long to Entered Address.
But since function is used in a different way, I posted my answer to help you do what you originally intended to. Feel free to upvote the answer from where the arePointsNear function came from if that's what you only need.
I hope this helped!
I am using KML layers in Google Maps. And when I load a layer into a map, it shows up in every world as far as you keep horizontally scrolling. For layers with content on a quite small area that doesn't pose a problem, as the map will automatically zoom to show only the relevant content from the layer. But for layers that show markers across the whole world, having them repeat again on the next world, it looks like a bunch of gibberish.
Take for example this sample code from Google Maps, but with a layer of Holocene volcanoes instead of their layer provided by default. If you want to see all of them, you see more than all of them, and you have no reference for when you've come to the place where they are repeating the ones you've already looked at.
Example: http://jsfiddle.net/eppptn2x/
Code:
var map;
var elevator;
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0)
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var markers = [];
var georssLayer = new google.maps.KmlLayer({
url: 'http://www.volcano.si.edu/ge/GVPWorldVolcanoes.kml'
});
georssLayer.setMap(map);
How do I prevent this behavior? How do I make all layer content, and any markers, be limited to only one world?
I hope I understood your question. Try entering a value for minZOom in mapOptions like this:
var myOptions = {
zoom: 2,
minZoom:2,
center: new google.maps.LatLng(10, 0)
};
I know it's too late but may be it would be useful for someone.
To prevent repeating markers you can set optimized option to false
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
optimized: false
});
You can find related topic here.
I am displaying a google map in a modal and I see lots of people have had this issue and there seems to be a fix but so far nothing I've tried has worked.
Basically I am loading googles places search in Template.map.rendered - it seems like something is happening with the DIVs because when I resize the window it re-renders and displays properly.
Now, I have tried all kinds of tricks (hiding / showing various DIVs), calling google.maps.event.trigger(map, "resize"); etc.
The map template is being loaded into another template that is a form (with other fields etc).
If someone could point me in a fruitful direction that would be awesome - seems like it should be a simple fix but I'm stumped.
Thanks!
You're in luck, we just solved our issue regarding this. Assuming the template map is called within a modal:
Template.map.rendered = function() {
Tracker.autorun(function() {
Session.set('map_available', true);
var center = {
latitude: -1.8445
longitude: 52.9445
}; // end var center
var zoomLevel = 15;
if(Session.equals('map_available', true)) {
GoogleMaps.init({'sensor': true, 'key' : 'OPTIONAL_KEY' },
function() {
var mapOptions = {
zoom: zoomLevel,
minZoom: 15,
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setCenter(new google.maps.LatLng( center.latitude, center.longitude ));
} // end closure param 2 of GoogleMaps init
}); // end GoogleMaps.init
} // end Session.equals 'map_available'
} //end Tracker.autorun
} // end Template.map.rendered
Template.map.destroyed = function() {
Session.set('map_available', false);
}
So the strategy here is to monitor dependency tracking independently and make sure it gets re-added after any DOM reactions. Bonus feature here is that if you include var center modification inside Tracker.autorun (e.g. var center = navigator.location) you will have a map that changes center when you move around (lat, long has changed).
Also, we used the extension mrt:googlemaps for the GoogleMaps integration. Seems to be the best one to use.
Had the same problem that stumped me for an hour. My easy fix was to wrap it in a window onload. Try it, you might like it :-)
Template.mapsAutoComplete.rendered = function() {
window.onload = function () {
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
...
};
};
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm trying to develop an application by using Google Maps API v3. What I'm trying to do is; first let the user draw a polygon on a Google Map and get his/her polygon's coordinates and save them into a database. I will then show the user saved coordinates.
I don't know how to let users draw polygon on a Google Map with API v3 and then get the coordinates. If I can get those coordinates, it's easy to save them into a database.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html is nearly the exact example but it uses API v2 and doesn't give coordinates. I want to use API v3 and be able to get all coordinates.
Is there any examples of drawing polygon and getting its coordinates with API v3?
If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.
Also, here is a Codepen
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
It's cleaner/safer to use the getters provided by google instead of accessing the properties like some did
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
here you have the example above using API V3
http://nettique.free.fr/gmap/toolbar.html
Well, unfortunately it seems that one cannot place custom markers and draw (and obtain coordinates) directly from maps.google.com if one is anonymous/not logged in (as it was possible some years ago, if I recall correctly). Still, thanks to the answers here, I managed to make a combination of examples that has both the Google Places search, and allows drawing via the drawing library, and dumps coordinates upon making a selection of any type of shape (including coordinates for polygon) that can be copypasted; the code is here:
https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
This is how it looks like:
(The Places markers are handled separately, and can be deleted via the DEL "button" by the search input form element; "curpos" shows the current center [position] and zoom level of the map viewport).
Since Google updates sometimes the name of fixed object properties, the best practice is to use GMaps V3 methods to get coordinates event.overlay.getPath().getArray() and to get lat latlng.lat() and lng latlng.lng().
So, I just wanted to improve this answer a bit exemplifying with polygon and POSTGIS insert case scenario:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
var str_input ='POLYGON((';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
console.log('polygon path array', event.overlay.getPath().getArray());
$.each(event.overlay.getPath().getArray(), function(key, latlng){
var lat = latlng.lat();
var lon = latlng.lng();
console.log(lat, lon);
str_input += lat +' '+ lon +',';
});
}
str_input = str_input.substr(0,str_input.length-1) + '))';
console.log('the str_input will be:', str_input);
// YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
// INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')
});
to accomplish what you want, you must getPaths from the polygon. Paths will be an array of LatLng points. you get the elements of the array and split the LatLng pairs with the methods .lat and .lng in the function below, i have a redundant array corresponding to a polyline that marks the perimeter around the polygon.
saving is another story. you can then opt for many methods. you may save your list of points as a csv formatted string and export that to a file (easiest solution, by far). i highly recommend GPS TXT formats, like the ones (there are 2) readable by GPS TRACKMAKER (great free version software). if you are competent to save them to a database, that is a great solution (i do both, for redundancy).
function areaPerimeterParse(areaPerimeterPath) {
var flag1stLoop = true;
var areaPerimeterPathArray = areaPerimeterPath.getPath();
var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";
var counter01 = 0;
var jSpy = "";
for (var j = 0;j<areaPerimeterPathArray.length;j++) {
counter01++;
jSpy += j+" ";
if (flag1stLoop) {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
flag1stLoop = false;
} else {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
}
}
// last point repeats first point
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
return markerListParsedTXT;
}
attention, the line that ends with ",1" (as opposed to ",0") starts a new polygon (this format allows you to save multiple polygons in the same file). i find TXT more human readable than the XML based formats GPX and KML.
The other answers show you to create the polygons, but not how to get the coordinates...
I'm not sure the best way to do it, but heres one way.. It seems like there should be a method to get the paths from the polygon, but I can't find one, and getPath() doesn't seem to work for me. So here's a manual approach that worked for me..
Once you've finished drawing your polygon, and pass in your polygon to the overlay complete function, you can find the coordinates in the polygon.overlay.latLngs.b[0].b
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
$.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
var lat = latlng.d;
var lon = latlng.e;
console.log(lat, lon); //do something with the coordinates
});
});
note, i'm using jquery to loop over the list of coordinates, but you can do loop however.
Adding to Gisheri's answer
Following code worked for me
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
//console.log(polygon.overlay.latLngs.j[0].j);return false;
$.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
var LatLongs = LatLongsObject;
var lat = LatLongs.k;
var lon = LatLongs.B;
console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates
});
Cleaned up what chuycepeda has and put it into a textarea to send back in a form.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
var str_input = '{';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
$.each(event.overlay.getPath().getArray(), function (key, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
str_input += lat + ', ' + lon + ',';
});
}
str_input = str_input.substr(0, str_input.length - 1) + '}';
$('textarea#Geofence').val(str_input);
});
try this
In your controller use
> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
>
> function onMapOverlayCompleted(e) {
>
> e.overlay.getPath().getArray().forEach(function (position) {
> console.log('lat', position.lat());
> console.log('lng', position.lng());
> });
>
> }
**In Your html page , include drawning manaer**
<ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
tilt="45"
heading="90">
<drawing-manager
on-overlaycomplete="onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:'www.example.com/icon'}"
rectangleOptions="{fillColor:'#B43115'}"
circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>