Ajax request error to load in google map

Asked

Viewed 410 times

0

I’m making a request ajax code:

$.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 this case is a google maps map, gives an error: You have included the Google Maps API Multiple times on this page. This may cause Unexpected errors.

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

I have no other part of the reference code for inclusion of the map scritp, it is loaded directly by the url.php file via ajax.

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

I would like to know why of the error, because I am referencing the map script only once and not multiple times according to the error reported.

php jquery ajax

2 answers

1

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

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

And don’t forget to run the method: init_map(), you can do this directly from the script URL by placing one more parameter: &callback=init_map or doing a auload:

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

NOTE: Take a look at this script from Bank 24 hours

If it doesn’t work, create a API Key.

Here is more information for your guidance.

Here a working example:

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

  • worked the map, but if it is on the js console the error continues and gives another error: Google Maps API Warning: Sensornotrequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

0

You need to include this:

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

... in place of what you placed without setting a KEY generated by Google.

  • need the key? or just highlight in red?

  • It’s Google’s default what’s in red.

  • as reported, no ajax request to show map works. with ajax request to show map is not working.

  • A key, is not mandatory, just put the sensor as false.

  • still doesn’t work. quoted error remains

Browser other questions tagged php jquery ajax

You are not signed in. Login or sign up in order to post.