CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
razvai
razvai

Reputation: 13

How can I show text when clicking on a Google Maps API marker?

How can I set a text when I click on the icon marker from google map?

The request is: when I click on a icon the text should appear and on I click on other icon only the selected icon should have text

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 45.9356343,
      lng: 25.9017273
    }
  });

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      icon: "/resources/service-points.png",

    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}

var locations = [{
    lat: 44.426049,
    lng: 26.047637
  },
  {
    lat: 44.428430,
    lng: 26.140104
  },
  {
    lat: 44.487002,
    lng: 26.078824
  },
  {
    lat: 44.431288,
    lng: 26.110165
  }
]
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<body>
  <div id="map"></div>

  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
  </script>
</body>

Upvotes: 1

Views: 1839

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133400

you could use an info window 

 var contentString = 'my text for this marker'
 var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

  var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        icon: "/resources/service-points.png",
        title: 'my marker'

      });
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });

here you can find a google sample https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Upvotes: 0

Clement Levesque
Clement Levesque

Reputation: 1212

You should use the InfoWindow object from Google : * https://developers.google.com/maps/documentation/javascript/infowindows?hl=fr

The code looks like this, create your object and then add a listener to your marker so it can launch the display of your window :)

var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

Upvotes: 2

Related Questions