2

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>
MH2K9
  • 11,951
  • 7
  • 32
  • 49
Pavan
  • 85
  • 1
  • 12
  • This isn't enough information to answer your question. Can you let us know how you've set up Vue, so that we can provide more information about that piece. The code you've provided is the JS for the map, which could potentially be anywhere in VueJS – shashwat Aug 03 '19 at 04:56
  • Thnk u for your response @Shashwat. i have edited code. – Pavan Aug 03 '19 at 05:13

1 Answers1

1

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.

MH2K9
  • 11,951
  • 7
  • 32
  • 49
  • it showing last ['Cronulla Beach','Australia', -34.028249, 151.157507, 3] to all marker.. – Pavan Aug 03 '19 at 06:59
  • 1
    You have to create a function for opening individual information. See my update. It works. Demo added. – MH2K9 Aug 03 '19 at 07:26