Google Maps API Tooltip

Question

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="js/jquery.gmap.js"></script>
<script type="text/javascript">
    $('#myModal').modal('show');
    function initialize() {
        var mapOptions = {
            controls: {
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true
            },
            scrollwheel: false,
            zoom: 6,
            center: new google.maps.LatLng(-23, -44)
        }

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

        setMarkers(map, affiliates);
    }

    var affiliates = [
        ['São Paulo', -23.544778, -46.640443],
        ['Curitiba', -25.430424, -49.267594, 5],
        ['Porto Alegre', -30.029993, -51.228282, 3],
        ['Ribeirão Preto', -21.175955, -47.810941, 2],
        ['Limeira', -22.564294, -47.404107, 1],
        ['Rio de Janeiro', -22.901542, -43.180402, 1]
    ];

    function setMarkers(map, locations) {
        var image = {
            url: 'images/boneco_base.png',
            size: new google.maps.Size(22, 30),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 32)
        };

        var shape = {
            coords: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };

        for (var i = 0; i < locations.length; i++) {
            var affiliate = locations[i];
            var myLatLng = new google.maps.LatLng(affiliate[1], affiliate[2]);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                shape: shape,
                title: affiliate[0],
                zIndex: affiliate[3]
            });

        }
    }

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

</script>

i have the code above to show my affiliates, but i want when the user clicks on image show a tooltip where it show more details.

i already tried to put some codes inside for but it doesn't work for me

how can i do it ?

Answer 1

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    //$('#myModal').modal('show');

    var map;
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    var bounds = new google.maps.LatLngBounds();

    function initialize() {
        var mapOptions = {
            controls: {
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true
            },
            scrollwheel: false
        }

        map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);

        setMarkers(map, affiliates);
    }

    var affiliates = [
        ['São Paulo', -23.544778, -46.640443, "(11) 3594-3666<br>R. Barão de Itapetininga, 140 - República<br>CEP: 01042-000<br>São Paulo - SP"],
        ['Curitiba', -25.430424, -49.267594, "(41) 3029-0501<br>R. Mal. Deodoro, 503 cj 1802 - Centro<br>CEP: 80020-320<br>Curitiba - PR"],
        ['Porto Alegre', -30.029993, -51.228282, "(51) 3023-4224<br>R. dos Andradas, 1234 cj 1202 - Centro Histórico<br>CEP: 90020-008<br>Porto Alegre - RS"],
        ['Ribeirão Preto', -21.175955, -47.810941, "(16) 3633-1221<br>R. Álvares Cabral, 576 cj 31 - Centro<br>CEP: 14010-080<br>Ribeirão Preto - SP"],
        ['Limeira', -22.564294, -47.404107, "(19) 3441-5474<br>R. Santa Cruz, 787 cj 82 - Centro<br>CEP: 13480-041<br>Limeira - SP"],
        ['Rio de Janeiro', -22.901542, -43.180402, "(21) 2516-2565<br>Av. Pres. Vargas, 482 cj 2012 - Centro<br>CEP: 20071-004<br>Rio de Janeiro - RJ"]
    ];


    function setMarkers(map, locations) {

        var image = {
            url: 'images/boneco_base.png',
            size: new google.maps.Size(22, 30),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 32)
        };


        for (var i = 0; i < locations.length; i++) {
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: locations[i][0]
            });
            bounds.extend(marker.position);

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {

                    infoWindow.setContent("<strong>" + locations[i][0] + "</strong><br>" + locations[i][3] + "<br><br><a href='#' onclick='var latLng = new google.maps.LatLng("+locations[i][1]+", "+locations[i][2]+");map.setZoom(17); map.panTo(latLng);'>[+] Ampliar</a><br><a href='#' onclick='map.setZoom(6); map.fitBounds(bounds);infoWindow.close();'>[-] Reduzir</a>");
                    infoWindow.open(map, marker);
                }

            })(marker, i));
        }

        map.fitBounds(bounds);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>