Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Denilson Paiva

Ajuda com script do Google Maps

Recommended Posts

Hello friends.

Estou com um codigo javascript do google maps funcionando perfeitamente (exibe os marcadores personalizados, cordenadas, nomes etc de um array list). porém, preciso que quando clicado no icone (pin ou marcador) abra um window com o nome, e link assim que clicado.

alguem pode me ajudar nessa ai? segue o codigo completo:

<script>


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
scrollwheel: false,
    zoomControl : true,
    panControl : false,
    //streetViewControl : true,
    mapTypeControl: false,
    //overviewMapControl: true, 
    center: {lat: -19.4710913, lng: -42.5563031}
//center: {lat: -5.18229664, lng: -37.35511959}
  });


  setMarkers(map);
}


// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
  
  var lista = [
     ['Bondi Beach', -19.457739, -42.555077, 1,'images/pin.png'],
     ['Coogee Beach', -19.455503, -42.554980, 2,'images/pin.png'],
     ['Cronulla Beach', -19.448637, -42.555208, 3,'images/pin.png']
  ];


  
function setMarkers(map) {


var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  
  for (var i = 0; i < lista.length; i++) {
    var anuncio = lista[i];
   
   //---------------------------------------------- 
var marker = new google.maps.Marker({
      position: {lat: anuncio[1], lng: anuncio[2]},
      map: map,
      icon: anuncio[4],
      shape: shape,
      title: anuncio[0],
     // zIndex: anuncio[3]
    });




//---------------------------------------------
  
  }
}
  
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por helkton
      iai galera como calcular rota, alguem pode me dar uma luz, calcular distancia entre dois pontos
      vou pegar o cadastro do cliente x o cadastro do estabelecimento
      ai preciso calcular a distancia entre o cliente x estabelecimento
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> <script> var p1 = new google.maps.LatLng(-20.783562, -51.747614); var p2 = new google.maps.LatLng(-20.775710, -51.685601); //calculates distance between two points in km's function calcDistance(p1, p2) { //return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2); var distance = (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2); } //alert(calcDistance(p1, p2)); </script> <input type="text" id="distancia"> to com esse codigo aqui, ele joga a distancia em um alert
      como jogo ele em um input pra depois poder trabalhar ele
    • Por Douglas Fabiano
      Olá amigos.
       
      Estou precisando desenvolver um mapa colaborativo como esse:https://pontosdealagamento.crowdmap.com/
       
      Mas um fora desse serviço que foi baseado o site acima, ou seja com o Google Maps.
       
      Podem me indicar por onde devo começar?
       
      Obrigado
    • Por dlucas2002
      Bom dia, estou querendo calcular a distância entre dois pontos(ponto1 e ponto2) no google maps, alguém pode me ajudar?Já tenho os dois pontos representados por marcadores e a rota, só falta a distância entre eles.Conferi a bibliografia atual do google maps sobre Distance Matrix mas ela não tem nenhum código que funcionasse pra esse meu problema específico.
       
       
      <!DOCTYPE html> <html>   <head>     <style>        /* Set the size of the div element that contains the map */       #map {         height: 400px;  /* The height is 400 pixels */         width: 100%;  /* The width is the width of the web page */        }     </style>   </head>   <body>     <div id="map"></div>     <script>                  function initMap() {             var directionsService = new google.maps.DirectionsService();             var directionsRenderer = new google.maps.DirectionsRenderer();               var ponto1 = new google.maps.LatLng(-5.577833,-36.913061);;             var ponto2 = new google.maps.LatLng(-22.934894,-47.060696);                var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: ponto2});             directionsRenderer.setMap(map);                var marker = new google.maps.Marker({position: ponto1, map: map});             var marker1 = new google.maps.Marker({position: ponto2, map: map});               var request = {                 origin: ponto1,                 destination: ponto2,                 travelMode: 'DRIVING'             };             directionsService.route(request, function(result, status) {                 if (status == 'OK') {                 directionsRenderer.setDirections(result);                 }             });                     }                </script>            <script async defer     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9RfaC0_ixdYkUQokkZqO93mzvLBCrvr4&callback=initMap">     </script>   </body> </html>
    • Por Karoline Arias
      Olá, Boa tarde!
      Fizemos um redesign de um e-commerce nacional, onde inserimos recursos do Google Maps na página de localização de lojas deste varejista. O maps incorporado nesta página apresenta o mapa, porem não apresenta a localização do usuário e a marcação (marker) das lojas ou pins.
      Observação: Ao substituirmos a chave Google do varejista, pela chave Google do desenvolvedor, as marcações aparecerem normalmente. Será que pode estar faltando alguma configuração ou componente associado a chave/conta Google do varejista?
      Obrigada!

    • Por isaque_cb2
      Bom, eu estou trabalhando em um app que depende de um mapa, gps e coisas do tipo, não é nada grande, e é mais pra estudos mesmo, quero conhecer melhor essa api, mais eu não encontro nenhum tutorial do tipo, todos que encontro são antigos e têm algum erro, alguém pode me ajudar? com tutoriais, dicas, video-aulas (que ainda funcionem...) eu já reproduzi vários, mais sempre tem um erro...
       
      grato por qualquer ajuda!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.