What is the method for displaying map tooltips by default rather than on mouseover?

Question

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover over the marker?

google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(37.1370345, 74.3872165),
        zoom: 3,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
        },
        disableDoubleClickZoom: false,
        mapTypeControl: false,
        scaleControl: true,
        scrollwheel: false,
        streetViewControl: true,
        draggable: true,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
            ...
        ],

    }

    var mapElement = document.getElementById('map1');
    var map = new google.maps.Map(mapElement, mapOptions);

    var locations = [
        ['Country 1', 39.690642467918366, 39.07426848448813],
        ['Country 2', 39.682790, 19.764394]
    ];
    var infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
    var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
    for (i = 0; i < locations.length; i++) {
        ...
    }
}

javascript jquery html css google-maps

Answer 1

Answer №1

Generate individual infowindows for each marker and link them to the respective marker. Display them automatically upon creation (by triggering

google.maps.event.trigger(marker, 'mouseover');

).

working fiddle

google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
  var mapOptions = {
    center: new google.maps.LatLng(37.1370345, 74.3872165),
    zoom: 3,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
    },
    disableDoubleClickZoom: false,
    mapTypeControl: false,
    scaleControl: true,
    scrollwheel: false,
    streetViewControl: true,
    draggable: true,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#111111"

      }, {
        "lightness": 50
      }]
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 45
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#ffffff"
      }, {
        "visibility": "on"
      }]
    }],

  }

  var mapElement = document.getElementById('map1');
  var map = new google.maps.Map(mapElement, mapOptions);

  var locations = [
    ['Country 1', 39.690642467918366, 39.07426848448813],
    ['Country 2', 39.682790, 19.764394]
  ];
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    var marker = createMarker(locations[i], map, myIcon);
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

function createMarker(location, map, myIcon) {
  marker = new google.maps.Marker({
    content: location[0],
    icon: myIcon,
    position: new google.maps.LatLng(location[1], location[2]),
    animation: google.maps.Animation.DROP,
    optimized: false,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
  });
  google.maps.event.trigger(marker, 'mouseover');
  return marker;
}

html,
body,
#map1 {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map1" style="border: 2px solid #3872ac;"></div>

Answer 2

Generate individual infowindows for each marker and link them to the respective marker. Display them automatically upon creation (by triggering

google.maps.event.trigger(marker, 'mouseover');

).

working fiddle

google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
  var mapOptions = {
    center: new google.maps.LatLng(37.1370345, 74.3872165),
    zoom: 3,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
    },
    disableDoubleClickZoom: false,
    mapTypeControl: false,
    scaleControl: true,
    scrollwheel: false,
    streetViewControl: true,
    draggable: true,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#111111"

      }, {
        "lightness": 50
      }]
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 45
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#ffffff"
      }, {
        "visibility": "on"
      }]
    }],

  }

  var mapElement = document.getElementById('map1');
  var map = new google.maps.Map(mapElement, mapOptions);

  var locations = [
    ['Country 1', 39.690642467918366, 39.07426848448813],
    ['Country 2', 39.682790, 19.764394]
  ];
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    var marker = createMarker(locations[i], map, myIcon);
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

function createMarker(location, map, myIcon) {
  marker = new google.maps.Marker({
    content: location[0],
    icon: myIcon,
    position: new google.maps.LatLng(location[1], location[2]),
    animation: google.maps.Animation.DROP,
    optimized: false,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
  });
  google.maps.event.trigger(marker, 'mouseover');
  return marker;
}

html,
body,
#map1 {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map1" style="border: 2px solid #3872ac;"></div>

Answer 3

Answer №2

To efficiently manage your markers and info windows, consider storing them in an array or object. This way, you can easily loop through them to open or close as needed based on specified conditions.

Here is a simple example:

var myPopups = []; // creating an empty array

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

myPopups.push(infowindow);// adding the infowindow to the array

// Once you have added all your info windows to the array, 
// you can loop through them to open all info windows.

for (var i = 0; i < myPopups.length; i++) {
    myPopups[i].open(map, marker);
}

Just remember that the open method requires the associated marker as the second parameter for the infowindow, so ensure you store your markers as well.

Answer 4

To efficiently manage your markers and info windows, consider storing them in an array or object. This way, you can easily loop through them to open or close as needed based on specified conditions.

Here is a simple example:

var myPopups = []; // creating an empty array

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

myPopups.push(infowindow);// adding the infowindow to the array

// Once you have added all your info windows to the array, 
// you can loop through them to open all info windows.

for (var i = 0; i < myPopups.length; i++) {
    myPopups[i].open(map, marker);
}

Just remember that the open method requires the associated marker as the second parameter for the infowindow, so ensure you store your markers as well.

What is the method for displaying map tooltips by default rather than on mouseover?

Answer №1

Answer №2

Similar questions

How can you insert text onto a page with restricted space?

Can you tell me why the outputs of these two codes are different when I ran them?

Scrolling through a list of objects in a React component to display a vertical lineup of items including the name and logo

Fatal syntax error encountered when attempting to define a JavaScript object

Clicking on a class within a single tag can be selected using

Loading external libraries in Angular2: A step-by-step guide

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Enable Cursor Display in Readonly Input Fields

Disable nprogress during certain ajax requests

What is the process for adding my JSON data to a select dropdown list?

Discover the secret to loading multiple Google charts simultaneously, despite the limitation that Google charts typically only allow one package to load at a time

What is the process for creating a line using points in three.js?

JavaScrip $("").text(); is a straightforward way to recognize and extract

Capturing images on Android devices through the camera option using HTML input file type

Error message: The object does not have the necessary support for the property or method 'modal'

Issue with date range filter functionality not functioning as expected

The occurrences of Swiper events fail to be activated

How to achieve smooth transitions in CSS3 with dynamic height changes?

The scope's attribute is present, but the variable within the scope's attribute is not

Retrieve the XML document and substitute any occurrences of ampersands "&" with the word "and" within it