How to populate a string array by clicking on the map in JavaScript?

Question

I want to gather information as I click on the map in JavaScript. I'm using Google Maps API. As I right click on the map a reverse Geocode tool works and gets the information of the point clicked.

What I want to do is as I clicked on the map I want to see these Geocoded points names and some attributes in a list.

Is it even possible ?

here I'm sharing some of my code ;

This is clicking and getting coordinates ;

google.maps.event.addListener(map, "rightclick", function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    alert(markersinfo);
    document.getElementById("latlng").value = lat.toFixed(5) + ', ' + lng.toFixed(5);
    geocodeLatLng(geocoder, map, infowindow);
});

Here is geocoding ;

function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
    geocoder.geocode({'location': latlng}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                markersinfo.push(marker);
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

I've tried to create an array called markersinfo[] and tried to push markers in to this array but I've realized that I'm just sending objects to array but not the informations. I need Geocode string , latitude and longitude of each clicked point in this markersinfo[] array.

try with `contextmenu` instead of `rightclick`. http://stackoverflow.com/a/4909312/4365315 — Sherali Turdiyev, Sep 30 '15 at 21:49
please clarify what is being clicked on to trigger this display of info. you should be able to collect the marker details into an array (in your code, before you push the marker onto markersinfo) and then display the contents of the info array on clicking something. — devlin carnate, Sep 30 '15 at 22:09

score 1 · Accepted Answer · edited Jun 02 '19 at 11:48

So, instead of google.maps.Marker objects you would like to save lat, lng and address properties in markersinfo array, right? If so, the below example shows how to accomplish it:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: -28.643387,
      lng: 153.612224
    },
    mapTypeControl: true
  });

  var infowindow = new google.maps.InfoWindow({
    content: ''
  });
  var geocoder = new google.maps.Geocoder();
  var markersinfo = [];

  google.maps.event.addListener(map, "rightclick", function(event) {
    geocodeLatLng(geocoder, event.latLng,
      function(results) {
        if (results[0]) {

          var marker = new google.maps.Marker({
            position: event.latLng,
            map: map
          });

          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);

          markersinfo.push({
            'address': results[0].formatted_address,
            'lat': event.latLng.lat(),
            'lng': event.latLng.lng()
          }); //save info

          document.getElementById('output').innerHTML = JSON.stringify(markersinfo);
        } else {
          window.alert('No results found');
        }
      },
      function(status) {
        window.alert('Geocoder failed due to: ' + status);
      });
  });


}


function geocodeLatLng(geocoder, latLng, success, error) {
  var location = {
    lat: latLng.lat(),
    lng: latLng.lng()
  };
  geocoder.geocode({
    'location': location
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      success(results);
    } else {
      error(status);
    }
  });
}

html,
body {
  height: 220px;
  margin: 0;
  padding: 0;
}

#map {
  height: 220px;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer>
</script>
<div id='output' />

devlin carnate · Answer 2 · 2015-09-30T22:27:24.213

0

You can gather your info in the same area where you're putting info in your infowindow. Just save your lat / long, etc to a string or array. You haven't been very clear about what content should be shown (other than lat / long), or what is clicked to trigger the display. So this code will need to be adjusted to suit your specific needs.

Example:

var contentString = "";
if (results[1]) {
//... 
  var contentString += "Location: "  + latlng + "<br />";
}
//perhaps add trigger this on an event, depending on what you want.
$('#myDiv').append(contentString);

And then your div to hold the content:

<div id="myDiv"></div>

edited Sep 30 '15 at 22:27

answered Sep 30 '15 at 21:46

devlin carnate

8,309
7
48
82

Thanks for the answer. Actually the infowindow you're asking me to use is just a simple box that appears over the points clicked on the map. When user clicks another point previous box dissapears and appears over the new point. I want a new box menu to collect the points so later I can play with this list as I want but that is the next step. I hope I've explained myself better this time . This my first JavaScript attempt. – Capan Sep 30 '15 at 21:51

How to populate a string array by clicking on the map in JavaScript?

2 Answers2