AJAX का उपयोग करने के दौरान ही Google मैप्स API "बिना किसी संदर्भ संदर्भित: Google को परिभाषित नहीं करता है"

Question 1

मेरे पास एक पृष्ठ है जो एक मानचित्र प्रदर्शित करने के लिए Google मैप्स एपीआई का उपयोग करता है। जब मैं पृष्ठ को सीधे लोड करता हूं, तो मानचित्र दिखाई देता है। हालाँकि, जब मैं AJAX का उपयोग करके पृष्ठ को लोड करने का प्रयास करता हूं, तो मुझे त्रुटि मिलती है:

Uncaught ReferenceError: google is not defined

ऐसा क्यों है?

यह नक्शा वाला पृष्ठ है:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}
$(document).ready(function(e) { initialize() });
</script>
<div id="map_canvas" style="height: 354px; width:713px;"></div>

और AJAX कॉल के साथ यह पृष्ठ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
    $('button').click(function(){
        $.ajax({
            type: 'GET', url: 'map-display',
            success: function(d) { $('#a').html(d); }
        })
    });
});
</script>
<button>Call</button>
<div id="a"></div>
</body>
</html>

आपकी सहायता के लिए धन्यवाद।

Question 2

दस्तावेज़ को डिफ़ॉल्ट रूप से लोड करने के बाद एपीआई लोड नहीं किया जा सकता है, आपको इसे अतुल्यकालिक लोड करना होगा।

नक्शे के साथ पृष्ठ को संशोधित करें:

<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
    directionsService,
    map;

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

</script>

अधिक जानकारी के लिए यहां देखें: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14183434

उदाहरण: http://jsfiddle.net/doktormolle/zJ5em/

Question 3

मुझे पता है कि यह उत्तर सीधे तौर पर इस प्रश्न के मुद्दे से संबंधित नहीं है, लेकिन कुछ मामलों में "बिना संदर्भ दिए गए संदर्भ: Google परिभाषित नहीं है" समस्या तब होगी जब आपकी js फ़ाइल को उन Google मानचित्रों से पहले बुलाया जा रहा है, जिनका आप उपयोग कर रहे हैं ... तो यह मत करो:

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Question 4

एक अनुमान के अनुसार, आप अपने इनिशियलाइज़ फंक्शन से पहले कुछ शुरू कर रहे हैं: var directionsService = new google.maps.DirectionsService();

फ़ंक्शन में ले जाएँ, ताकि पृष्ठ लोड होने से पहले इसे आज़माएँ और निष्पादित न करें।

var directionsDisplay, directionsService;
var map;
function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();

Question 5

बिना संदर्भित संदर्भ: गूगल परिभाषित नहीं किया गया है जब नक्शा एपीआई स्क्रिप्ट टैग से एसिंक्स डेफर हटा दिया जाएगा ।

Question 6

API को कॉल करने के लिए आपके सभी वर्कअराउंड का पालन करने के बाद मेरे लिए क्या काम किया गया:

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
            type="text/javascript"></script>

मेरे पहले: <div id="map"></div>

मैं .ASP NET (MVC) का उपयोग कर रहा हूं

Question 7

मेरे लिए

इस लाइन को जोड़ना

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

इस लाइन से पहले।

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

काम

Question 8

सभी के लिए प्रासंगिक नहीं हो सकता है लेकिन यह थोड़ा विस्तार मेरा काम नहीं कर रहा था:

इससे div बदलें:

<div class="map">

इसके लिए:

<div id="map">

Question 9

शायद का उपयोग कर

<body onload="initialize();">

के बजाय

$(function(){ 
     initialize();
});

आपको मदद कर सकते हैं।