I want to save coordinates which i drawed on google maps.
This my map address i can draw line and distance.
LINK
Please give me a hint how can i save coordinates this line any textbox..?
You already have the markers in a variable, just loop over them like:
var tempPosition, string="";
for (var i = vmarkers.length - 1; i >= 0; i--) {
tempPosition = vmarkers[i].getPosition();
if(tempPosition) {
string += "[" + tempPosition.lat() + "," + tempPosition.lng() + "]";
}
}
Related
Any advice on how to adjust this piece of code, so that it pushes the coordinates of a first vertice of a polygon (sort of repeats it) in the end to make it ready for kml files?
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).lng() + ',' + polygon.getPath().getAt(i).lat() + ',0' + ";";
}
polygonArray.push(polygon);
});
It's relatively easy to push the coordinates of a first vertice and make them display after every iteration of the loop but I wanted them to be added once and after the last unique vertice.
Now I am getting this:
17.38037109375,52.60971939156647,0;
17.314453125,51.89683388301249,0;
18.731689453125,52.456009392640766,0;
and would like to get this:
17.38037109375,52.60971939156647,0;
17.314453125,51.89683388301249,0;
18.731689453125,52.456009392640766,0;
17.38037109375,52.60971939156647,0;
I would appreciate a liitle help on that.
Thank you.
If you want to append the first coordinate to the end of the string in the "info" div, just add it to the end:
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).lng() + ',' + polygon.getPath().getAt(i).lat() + ',0' + ";";
}
document.getElementById('info').innerHTML += polygon.getPath().getAt(0).lng() + ',' + polygon.getPath().getAt(0).lat() + ',0' + ";";
polygonArray.push(polygon);
});
I am having an issue with Google Maps cluster function. It is correctly clustering and placing cluster counts on the map and the cumulative counts total the correct number of locations/markers given it. But no icons are showing when the count of the locations within a given cluster is greater than 9 (or greater than 1 digit count). Does anyone have an idea how to correct this? I am using the "standard" Google Maps blue icons for the clusters. The blue icon shows for a cluster of 4 markers. But the clusters of 132 and 79 markers only display the 132 and 79 counts -- no blue icons. I don't have a convenient place to quickly put a screen capture for public consumption.
var tableContent = "";
$.each(data, function (i, item) {
iCount++;
var aCount = iCount.toString();
var iCt = item.RECNO;
//table += "<tr><td>" + '(' + aCount + ') ' + item.DDSPNM + "</td></tr>";
tableContent += '<tr>';
var rowContent = "";
rowContent += "<strong>" + item.DDSPNM + "</strong>" + "<br>"
rowContent += item.DCTRNUM;
tableContent += '<td>' + rowContent + '</td>';
tableContent += '</tr>';
var latlng = new google.maps.LatLng(item.Latitude, item.Longitude);
locations.push(latlng);
var marker = new google.maps.Marker({
position: latlng,
label: { text: aCount, color: 'black', fontSize: "12px" },
title: 'this is ' + item.DDSPNM,
map: map
});
gmarkers.push(marker);
});
if (iCount == 0)
{
table += "<tr><td>No providers were found in the specified location. Please change your search criteria and try the search again.</td></tr>";
tableContent += "<tr><td>No providers were found in the specified location. Please change your search criteria and try the search again.</td></tr>";
}
$('#results').append(tableContent);
// Instantiate pagination after data is available
pager = new Pager('results', 10);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
// set the bounds for the map and re-size/re-position to display all markers
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
bounds.extend(locations[i]);
}
map.fitBounds(bounds);
var markerCluster = new MarkerClusterer(map, gmarkers,
{ imagePath: #Url.Content("~/Images/m")});
}
Please ignore what is ugly presentation for the user, that's the piece I am working on now. But I'm stumped as to why icons for clusters don't show when the count is greater than 9 (or greater than 1 digit).
Sorry for clogging up the works with this question. All I can say is duh...I thought all of the icons were enabled in my VS project and that is wrong. All I can say is that once I enabled all icons the yellows, reds, etc. starting appearing with multiple digit counts.
Sorry for personal screw up!
I'm using the google places JavaScript API to get place details.
I am encountering two issues to do with JavaScript:
The first is extracting user reviews from the place.reviews array
I can get the place.name, place.phone, and place.formatted_address values but I am unable to retrieve the reviews from the place.reviews array.
I found some sample code on the link below to loop through the reviews array but I can't get it to work. I get script errors for example with the keyword forEach.
Google Places JS API Show Reviews
Is there an easy way to retrieve the values from the reviews array?
These are the script declarations at the top of my HTML document:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>
The Second
I am creating a simple search app so I can view what's around me. I would like to add the distance and time from the start location to the venue the user clicks on i.e. 'London Bridge = 1 km, 10 mins'.
I can get the time and distance values using the Google matrix distance API using a callback function but I don't know how then to pass the values to the main part of my code.
I have had a look at some answers on here but I am still confused about how callback functions work:
function createMarkers(results, PlaceSearchStatus) {
var resultcontent = ''; //stores place results to be displayed on map
var resultdiv = document.getElementById('searchresults');
if (PlaceSearchStatus == google.maps.places.PlacesServiceStatus.OK) {
// if we have found something - clear map (overlays)
clearOverlays();
// and create new markers by search result
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
//use the Distance Matrix API to get the distance between this venue and start location
/distancematrix#distance_matrix_responses
var DistanceService = new google.maps.DistanceMatrixService();
var origin1 = new google.maps.LatLng(document.getElementById('lat').value, document.getElementById('lng').value);
var destination1 = results[i].geometry.location;
DistanceService.getDistanceMatrix({
origins: [origin1],
destinations: [destination1],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, DistanceMatrixStatus) {
if (DistanceMatrixStatus != google.maps.DistanceMatrixStatus.OK) {
alert('Distance matrix API Error was: ' + DistanceMatrixStatus);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
//getting the distance value gives more accurate results than the text value but not using that
//alert(results[i].distance.value + ", " + results[i].duration.value);
//get the time and distance to this location from our start location
// Need to fix. this isn't working as this is inside a callback function.
var TimeAndDistance = results[i].distance.text + ", " + results[i].duration.text;
}
}
} // end of distance matrix code
//concatonate the accessible search results and add on the time and distance to the place name
resultcontent += '<p> <h2>' + '<div <input id=\"button2\" type=\"button\" class=\"button\" value=\"' + results[i].place_id + '\" onclick=\"GetIndividualPlaceDetails(this);\">' + results[i].name + '</div> </h2>';
Thanks,
Tom
The following code works for accessing the reviews and I'm using another work around for my second question:
len = place.reviews.length;
for (i=0; i<len; ++i) {
resultcontent += place.reviews[i].rating + ' stars';
resultcontent += ', On ' + place.reviews[i].time + ' ' + place.reviews[i].author_name + ' said:';
if (!!place.reviews[i].text) resultcontent += '<br />' + place.reviews[i].text;
}
}
I wanting to reproject the vertices of my polygon. I have been able to achieve this for the bounds but having a bit of trouble with the vertices.
function onFeatureModified(event) {
var bounds = event.feature.geometry.getBounds();
var answer = "bottom: " + bounds.bottom + "\n";
answer += "left: " + bounds.left + "\n";
answer += "right: " + bounds.right + "\n";
answer += "top: " + bounds.top + "\n";
alert(answer);
var mapProjv = map.getProjectionObject();
var epsg4326v = new OpenLayers.Projection("EPSG:4326");
var verticesNative = event.features[0].geometry.getVertices();
var verticesLatLon = verticesNative.transform( mapProjv , epsg4326v );
var vertices = verticesNative;
alert(verticesNative);
}
Below code that works:
var vertices = event.features[0].geometry.getVertices();
alert(vertices);
getVertices() method returns an array of OpenLayers.Geometry.Point objects, so you can't call transform() method on it. What you should do instead is to loop through array and call transform() on each object like that:
var vertices = event.features[0].geometry.getVertices();
var transformedVertices = [];
for(var i=0; i < vertices.length; i++){
transformedVertices.push(vertices[i].transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
));
}
//create new feature with transformed vertices
I have images to overlay on google maps by using checkboxes. I made this script to not create the separate individual script for each overlay but it returns the error of proprty not supported in main.js of google maps api. However, i tried getting the output value in javascript alert and it returns the values as expected. Could anyone help please?
Here is the script.
function shImg(url,lat,lng) {
var lat_ = "new GLatLng(" + lat + ")";
var lng_ = "new GLatLng(" + lng + ")";
var latlng = lat_ + ", " + lng_;
var ticked_ = document.getElementById(url);
var boundaries_ = "new GLatLngBounds(" + latlng + ")";
var imgurl_ = "http://www.mywebsite.com/" + url + ".jpg";
imageOverlay_ = new GGroundOverlay(imgurl_, boundaries_);
map.addOverlay(imageOverlay_);
if (!ticked_.checked) {
map.clearOverlays();
// imageOverlay_=null;
}
else {
alert(boundaries_);
imageOverlay_.show();
}
}
The GLatLng constructor takes two arguments, a latitude and a longitude. Similarly GlatLngBounds takes two arguments, a GlatLng for the south west corner and one for the north east. See the api docs for more info.
Lastly why are you doing string concatenation all over the place? For example "new GLatLng(" + lat + ")"; should be new GLatLng(lat,lng);