CODEWITHSUNDEEP
javascriptgoogle-mapsvue.js
Pavan
Pavan

Reputation: 85

Display pop up information on clicking marker in google map

The display pop up information consists of: location, name, country, lat and long, in a single popup window by clicking each marker in Google maps. I need to display all information, like: "Location: Bondi Beach, Country: Australia, Lat:-33.890, Long: 151.274", of that particular marker clicked by the user.

<template>
  <div id="map" class="map"></div>
</template>

<script>
mounted() {
  var locations = [
    ['Bondi Beach','Australia',-33.890542, 151.274856, 4],
    ['Coogee Beach','Australia', -33.923036, 151.259052, 5],
    ['Cronulla Beach','Australia', -34.028249, 151.157507, 3] 
  ];

  var count, marker;

  // Init map
  let mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // Create info window
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 350,
      pixelOffset: new google.maps.Size(-10,-25)
  });

  var infoData = [];
  // Add markers
  for (count = 0; count < locations.length; count++) {
    var loan = locations[count][0]
      let myLatlng = new google.maps.LatLng(locations[count][1], locations[count][2]);

      marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: locations[count][0]
      });

  marker.setMap(map);

  // Bind marker click event to open info-window
  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent( " " );
    infowindow.open(map);
    infowindow.setPosition(myLatlng);
    });

  }
}
</script>

Upvotes: 2

Views: 5364

Answers (1)

MH2K9
MH2K9

Reputation: 12039

You can set the info-window content as an HTML. JS fiddle from Google. Google official documentation.

Code Example:

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Init map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Create info window
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
});

var infoFn = function (count) {
    return function (e) {
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    }
};

// Add markers
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    });
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);
}

Working demo.

Upvotes: 1

Related Questions