API-интерфейс API Карт Google

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> 

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

я уже пытался поставить некоторые коды внутри for, но он не работает для меня

как я могу это сделать?

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>