CODEWITHSUNDEEP
google-maps
enne87
enne87

Reputation: 2299

javascript - Add text to gmap marker

I use gmap for geolocation, i.e. to set markers on a google map on specific positions. Now what I want to achieve is to set markers and as soon as a user clicks on one of these markers, a info window opens and shows specific text. Every marker has its own text.

Now the problem is that I can't determine which marker the user has clicked and therefore can't set the right text.

Here's a code snippet:

    //**Global variables**/
    var thingsOfInterest = new Array(new Array(), new Array(),new Array());
    var map = null;
    //End Global variables

    //init google map

function initGoogleMaps(){
    map = new google.maps.Map(document.getElementById("map_canvas"));
    var centerMap = new google.maps.LatLng(48.337881,14.320323);
    $('#map_canvas').gmap({'zoom':7,'center': centerMap});
    $('#map_canvas').gmap('option', 'zoom', 10);

   //This is not working on my ios-simulator, no idea why. Anyway....
   forge.geolocation.getCurrentPosition(function(position) {
            alert("Your current position is: "+position);
         }, function(error) {
    });
}
/*End init map*/

/*Set the markers on the map*/
function setMarkers() {
    /* thingsOf Interest contains:
     * thingsOfInterest[i][0] -> the text that the marker should hold
     * thingsOfInterest[i][1] -> the latitude
     * thingsOfInterest[i][2] -> the longitude
     */

    for (var i = 0; i < thingsOfInterest.length; i++) { //Iterate through all things
      var item = thingsOfInterest[i];  //get thing out of array
      var itemLatLng = new google.maps.LatLng(item[1], item[2]);  

      $('#map_canvas').gmap('addMarker', {'position': new google.maps.LatLng(item[1],item[2]) } ).click(function(e) {
                    $('#map_canvas').gmap('openInfoWindow', {'content': 'dummyContent'}, this); ///////SET REAL CONTENT HERE
      });
    }

}

Now this works all great, but what I miss is to get the marker the user has clicked on in the function()-eventHandler. If I could get the specific marker, I could set the text on it.

I hope this is clear enough.

Any help is very appreciated.

Thanks,

enne

Upvotes: 1

Views: 3198

Answers (1)

Michal Klouda
Michal Klouda

Reputation: 14521

Assuming your code with dummy text is working, you can pass your text right away.. 

$('#map_canvas').gmap('addMarker', {'position': new google.maps.LatLng(item[1],item[2])})
   .click(function(e) {
      $('#map_canvas').gmap('openInfoWindow', {'content': item[0]}, this); 
   });

Or another approach would be:

function setMarkers() {

    for (var i = 0; i < thingsOfInterest.length; i++) {

        var item = thingsOfInterest[i];  
        var itemLatLng = new google.maps.LatLng(item[1], item[2]);

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

        google.maps.event.addListener(marker, 'click', function () {
            var infowindow = new google.maps.InfoWindow({ content: item[0] });
            infowindow.open(map, marker);
        });
    }
}

Upvotes: 1

Related Questions