Develop Reference

How to push the coordinates of a first vertice of a polygon created with drawing manager and make them the last (closing) ones?

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);
});

Looping through Google Places reviews array and getting value from callback function

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;
}
}

How to convert Database/Table Data into a File's Name?

Good Day to all I just wanna ask something about Leaflet Markers.
I have a database and a table with a field that has a name of icon_name and it looks like this.
|icon_name|
___________
|FIRE |
|HOMICIDE |
|RAINSTORM|
and I also have a folder Named Legends and it has a file that looks like this.
Folder Name: Legends
Files Inside:
FIRE.jpg
HOMICIDE.jpg
RAINSTORM.jpg
as you can see the names of jpg files is the same in my table (icon_name)
My code below is calling a specific image in a folder and uses this as a Leaflet markers image before placing it in the map (Note: The following code is generating the markers info from database into the map)
var Icon1 = L.icon({ //<---Assigning a name of an image into a Leaflet Icon.
iconUrl: 'legends/FIRE.jpg',//<--- Image Folder Location + the Image Name
iconSize: [50, 50], //<--- Size of the image converted as icon
iconAnchor: [23, 50], //<--- Icons Anchor
popupAnchor: [3, -50] //<--- Leaflet Pop up
function getInfo() {
$.getJSON("get_info.php", function (data) {
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].lat, data[i].lng);
var marker = new L.Marker(location,{icon:Icon1});
marker.bindPopup(
data[i].name + "<br>" +
data[i].user_date + "<br>" +
data[i].user_time + "<br>" +
data[i].address + "<br>"
).addTo(map);
marker.on('click', function(e) { // HERE YOU GO
var ll = marker.getLatLng();
document.querySelector('#userLat1').value = ll.lat;
document.querySelector('#userLng1').value = ll.lng;
alert('You have selected a Marker that will be deleted');
});
}
});
}
Now the output of the code above is like this:
A lot of markers from different parts of the map (good)
All of that markers image is only "FIRE.jpg" even if the other markers has an "icon_name" of HOMICIDE,RAINSTORM and others.
Now here is my big question: How can I pass the value of my tables field icon_name into the value of var Icon1 or iconUrl
var Icon1 = L.icon({
iconUrl: 'legends/FIRE.jpg',
so that the output will be different markers with different markers image. I hope you understand me. TY
Based on the given answer on me this is my tested code but its not working.
(Part of the code)
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].lat, data[i].lng);
var Icon1 = L.icon({
iconUrl: 'legends/FIRE.jpg',
marker.bindPopup(
data[i].name + "<br>" +
data[i].user_date + "<br>" +
data[i].user_time + "<br>" +
data[i].address + "<br>"
).addTo(map);

Im not sure where you're setting the IconURL, but something along the lines of this should do it.
var marker = data[i].marker;
var url = "legends/" + marker + ".jpg";

Google Maps save drawed polyline coordinates

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() + "]";
}
}

Google Maps v2: how to display various markers with the same coordinates

I'm using Google Maps JavaScript API V2 to mark locations saved in an array. Markers with different coordinates are displayed well, but I have no idea how to display various markers with the same coordinates. I need it because an array of locations can have the same coordinates, but with a different description. What is the way to display those different descriptions?
The code where markers are added is:
var map;
function loadEarth(mapdiv) {
if (GBrowserIsCompatible()) {
if(!mapdiv)
return true;
map=new GMap2(document.getElementById("map"));
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(40.186718, -8.415994),13);
}
}
function createMarker(point, number, description) {
var marker = new GMarker(point);
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + description;
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
...
for(var i=0; i<gl_list.length; i++){
var point = new GLatLng(gl_list[i].Latitude,gl_list[i].Longitude);
description = "Visited place : "+gl_list[i].nome+" on : "+gl_list[i].data;
map.addOverlay(createMarker(point, i + 1, description));
}
Thanks for your attention.

I very often have the exact same problem on my map and found myself worrying about the same multiple markers issues: which marker is on top? how does a user see them all? etc.
Eventually, I decided that the problem wasn't actually about markers; its really about a specific point on the map. From a user perspective, they could care less about the markers or any of the mechanics around the markers. All they really care about is the information associated with that location. From that perspective, the challenge is finding a way to provide the user a way to view the associated information in a straightforward way. So I decided to merge all of the markers that occupy the same location into a single marker that includes all of the information that matters to the user.
Step-by-step, here is the approach I use to solve the multiple markers in the same location problem:
Step 1: Sort the marker data to allow identification of the markers that occupy the same location:
gl_list.sort( function( a, b ) {
var aLat = a.Latitude, bLat = b.Latitude;
if ( aLat !== bLat ) { return aLat - bLat; }
else { return a.Longitude - b.Longitude; }
});
Step 2: Add a new function that creates a "special" marker for colocated members of the gl_list array:
var specialMarkers = null;
function createSpecialMarker( specialMarkers ) {
var infoWinContent = "<table class='special-infowin-table'>";
for ( var i = 0; i < specialMarkers.length; i++ ) {
infoWinContent +=
"<tr>" +
"<td class='special-table-label'>" +
"Visited Place [" + (i+1) + "]" +
"</td>" +
"<td class='special-table-cell'>" +
specialMarkers[i].nome + " on : " + specialMarkers[i].data +
"</td></tr>";
}
infoWinContent += "</table>";
var mrkrData = specialMarkers[0];
var point = new GLatLng( mrkrData.Latitude, mrkrData.Longitude );
var marker = new GMarker( point );
GEvent.addListener(marker, "click", function() {
map.openInfoWindowHtml( point, infoWinContent );
});
return marker;
}
Step 3: Iterate over the marker data, identify groupings that have the same location, show them on the map using a special marker, and handle all of the marker data at other locations "normally":
for ( var i = 0; i < gl_list.length; i++ ) {
var current = gl_list[i];
var coLocated = null;
var j = 0, matchWasFound = false;
if ( i < ( gl_list.length - 1 ) ) {
do {
var next = assetData[ i + ++j ];
if ( next !== undefined ) { //just to be safe
if ( next.Latitude === current.Latitude &&
next.Longitude === current.Longitude ) {
matchWasFound = true;
if ( coLocated === null ) {
coLocated = new Array( current, next);
}
else { coLocated.push( next ); }
}
else { matchWasFound = false; }
}
else { matchWasFound = false; }
}
while ( matchWasFound )
if ( coLocated != null ) {
var coLoMarker = createSpecialMarker( coLocated );
if ( specialMarkers === null ) {
specialMarkers = new Array( coLoMarker );
}
else {
specialMarkers.push( coLoMarker );
}
i += --j;
continue;
}
var point = new GLatLng(gl_list[i].Latitude,gl_list[i].Longitude);
description = "Visited place : "+gl_list[i].nome +
" on : " + gl_list[i].data;
map.addOverlay( createMarker( point, i + 1, description ) );
}
}
The idea is to produce a single marker and let the InfoWindow convey the multiple pieces of information about the location that are important, ending up with something that looks like this:
Now I haven't run this actual code, but it is based on code that runs every day. This is more intended to give you a fairly detailed look at the approach and share a body of code that should get you pretty darn close to a usable solution, with the understanding that it may need a little tweaking and debugging.

You can try with MarkerCluster or Marker Spiderfier for showing markers at same coords
MarkerCluster : DEMO
Marker Spiderfier : DEMO

Have you thought about using custom icons to represent multiple locations with the same coordinates? You could roll up all of the common locations into a single marker point as suggested above, than add additional marker points that look like buttons to the direct left and right of the common location (+/- .00001 latitude). Than attach a click event to the surrogate points, which by clicking the marker points would than allow you to iterate between the points on the shared location. You could even hide or disable the next and previous markers based on what the current maker displayed in the array is.

One idea might be to plot only unique locations, and roll up descriptions to a location level. For the overlay, you could display the full list of places at that location.

use clustering .make group of markers as cluster.one cluster will present many markers inside.