Ajax request error to load on google map

Question

Ajax request error to load on google map

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am making an ajax code request:

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

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

Request is being made successfully, no problem. What happens is when loading the result, in case it is a map of google maps, it gives an error: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

My url.php file is:

<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><scripttype="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>

I have nowhere else in the reference code to include the map scritp, it is loaded directly by the url.php file via ajax.

Accessing directly in the browser url.php works perfectly, if via ajax does not work, gives the error reported.

I would like to know why the error, since I am referencing the map script only once and not multiple times depending on the error reported.

php jquery ajax

asked by anonymous 04.04.2016 / 15:53

2 answers

Total SQL Records in all columns Diagonal movement unity 5

score 1 · Answer 1

You can use one with ssl, if you set the sensor to false, you do not need to use KEY:

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

Anddonotforgettoexecutethemethod:init_map(),youcandothisdirectlyfromtheURLofthescript,byplacingonemoreparameter:&callback=init_mapordoinganauload:

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

OBS:Takealookatthis Banco24Horas script. >

If this does not work, create a API Key / a>.

Here is more information for your guidance.

Here's an example working:

  <?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>

score 0 · Answer 2

You need to include this:

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

... instead of what you put without defining a KEY generated by Google.