Question

I’m trying to add a Google map to a website I am developing.

I have managed to include the map, with the correct long & lat coordinates (Using V3 of the API), but I’m having trouble adding a tooltip like you see when clicking a marker

See this URL for details

http://maps.google.co.uk/maps?q=york+web+design&oe=utf-8&rls=org.mozilla:en-GB:official&client=firefox-a&um=1&ie=UTF-8&hl=en&sa=N&tab=wl

When one of those markers is clicked, the tooltip appears, how can I achieve the same result on my small map?

Answer 1

The marker click items are called InfoWindows (google.maps.InfoWindow).

I used the api page for reference when I built our maps, it was really helpful and easy to understand.

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

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 km (208 mi) '+
                    'south west of the nearest large town, Alice Springs; 450 km '+
                    '(280 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="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                    'http://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);
});