0

Estou fazendo uma requisição código ajax:

$.ajax({
    type:"POST",
    url:"url.php",
    data:{
        ida : href,  
    },
    beforeSend: function(){

    },
    success:function(data){          
      $("#mapa").html(data);                 
    }
});

Requisição está sendo feita com sucesso, sem problema. O que ocorre é ao carregar o resultado, no caso é um mapa do google maps, da um erro: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

sendo que meu arquivo url.php é :

<div id="gmap_canvas"></div>
<div id='map-label'></div>
    <!-- JavaScript to show google map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>  
<script type="text/javascript">
    function init_map() {
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
        });
        infowindow = new google.maps.InfoWindow({
            content: "<?php echo $formatted_address; ?>"
        });
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }
    google.maps.event.addDomListener(window, 'load', init_map);
</script>

Não tenho em nenhuma outra parte do código referencia para inclusão do scritp do mapa, é carregado diretamente pelo arquivo url.php via ajax.

Acessando direto no navegador a url.php funciona perfeitamente, se for via ajax não funciona, da o erro relatado.

Gostaria de saber o porque do erro, pois estou fazendo referencia do script do mapas apenas uma vez e não múltiplas vezes conforme o erro informado.

2 Respostas 2

1

Você pode usar uma com ssl, se você colocar o sensor como false, não precisa usar a KEY:

<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false&language=pt-br" async defer></script>

E não esqueça de executar o método: init_map(), você pode fazer isso diretamente da URL do script, colocando mais um parâmetro: &callback=init_map ou fazendo um auload:

(function(){
     init_map();
})();

OBS: Dá uma olhada neste script do Banco24Horas

Se não funcionar, crie uma API Key.

Aqui tem mais informações para sua orientação.

Aqui um exemplo funcionando:

  <?php $latitude = '-23.642952'; $longitude='-46.786652'; $formatted_address='teste';?>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: <?php echo $latitude;?>, lng: <?php echo $longitude;?>},
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        marker = new google.maps.Marker({
            map: map,
            zoom: 8,
            center: {lat: <?php echo $latitude;?>, lng: <?php echo $longitude;?>}
        });
        infowindow = new google.maps.InfoWindow({
            content: "<?php echo $formatted_address; ?>"
        });
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
    async defer></script>
  </body>
</html>
1
0

Você precisa incluir isso:

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

... no lugar do que você colocou sem definir uma KEY gerada pelo Google.

5
  • precisa da key? ou apenas o destaque em vermelho?
    – lelopes
    Commented 4/04/2016 às 14:03
  • É padrão do Google o que está em vermelho. Commented 4/04/2016 às 14:04
  • como relatei, sem requisição ajax para mostrar o mapa funciona. com requisição ajax para mostrar o mapa não está funcionando.
    – lelopes
    Commented 4/04/2016 às 14:11
  • A key, não é obrigatória, é só colocar o sensor como false. Commented 4/04/2016 às 14:11
  • mesmo assim não funciona. o erro citado permanece
    – lelopes
    Commented 4/04/2016 às 14:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .