Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps JS: How do I get the small tooltip marker on hover AND the normal info window on click?

So check any google maps result like this: http://g.co/maps/htdva

If you hover over a marker, you get the tooltip. If you click it you get the big infowindow. I've got the infowindow working just fine via: this stackoverflow answer

Here's a picture of both the mini tooltip and the infowindow: enter image description here

Here is a jsFiddle demo: http://jsfiddle.net/3VMPL/

like image 993
CloudMagick Avatar asked Nov 09 '11 20:11

CloudMagick


People also ask

How do I put InfoWindow on marker?

Move an info windowAttach the info window to a new marker using the InfoWindow. open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

How do I change the default marker on Google Maps?

Click the Edit link below the name of the Map you want to change. On the Create Your Map page, click on the Advanced Settings tab. Then click the Upload Image button next to Default Marker Image.


2 Answers

Set the title property of the marker to the tooltip you want.

var tooltip = "some text";
marker = new google.maps.Marker({map:map, position:position, title:tooltip});
like image 57
Steve O'Connor Avatar answered Oct 02 '22 14:10

Steve O'Connor


I think what you want can be found here:

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);
like image 45
GSof Avatar answered Oct 02 '22 15:10

GSof