Google Maps JS: Как получить маленький маркер всплывающей подсказки при наведении курсора и обычное информационное окно при нажатии?

Question

Так что проверьте любой результат Google Maps, как это: http://g.co/maps/htdva

Если вы наведите курсор на маркер, вы получите всплывающую подсказку.Если вы нажмете на нее, вы получите большое информационное окно.У меня хорошо работает информационное окно через: этот ответ stackoverflow

Вот изображение и мини-всплывающей подсказки и информационного окна:

ВотjsFiddle demo: http://jsfiddle.net/3VMPL/

Answer 1

Установите свойство title маркера для нужной подсказки.

var tooltip = "some text";
marker = new google.maps.Marker({map:map, position:position, title:tooltip});

Answer 2

Я думаю, что вы хотите найти здесь:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

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

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

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

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

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

Answer 3

Вы можете сделать это только с помощью CSS, но имейте в виду, что он довольно хакерский и может перестать работать в любое время, если Google изменит свою разметку:

.gmnoprint[title] {
  overflow: visible !important;
  opacity: 1 !important;
}

.gmnoprint[title]:after {
  content: attr(title);
  /* Style your tooltip */
}