গুগল ম্যাপস এপিআই কেবল এজেএক্স ব্যবহার করার সময় "আনকচড রেফারেন্স এরিয়ার: গুগল সংজ্ঞায়িত নয়" ছোঁড়ে

Question 1

আমার একটি পৃষ্ঠা রয়েছে যা একটি মানচিত্র প্রদর্শন করতে গুগল ম্যাপস এপিআই ব্যবহার করে। আমি যখন পৃষ্ঠাটি সরাসরি লোড করি তখন মানচিত্রটি উপস্থিত হয়। তবে, আমি যখন এজেএক্স ব্যবহার করে পৃষ্ঠাটি লোড করার চেষ্টা করি তখন ত্রুটিটি পাই:

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>

এবং এই পৃষ্ঠাটি এজেএক্স কল সহ:

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

ডিফল্টরূপে দস্তাবেজটি লোড করা শেষ হওয়ার পরে API টি লোড করা যায় না, আপনাকে এটি অ্যাসিঙ্ক্রোনাস লোড করতে হবে।

মানচিত্রটি সহ পৃষ্ঠাটি পরিবর্তন করুন:

<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#14185834

উদাহরণ: http://jsfiddle.net/doktormolle/zJ5em/

Question 3

আমি জানি যে এই উত্তরটি এই প্রশ্নের ইস্যুটির সাথে সরাসরি সম্পর্কিত নয় তবে কিছু ক্ষেত্রে "অপ্রকাশিত রেফারেন্স এরর: গুগল সংজ্ঞায়িত করা হয়নি" সমস্যাটি ঘটবে যদি আপনার জেএস ফাইলটি গুগল ম্যাপস এপিআই ব্যবহার করার আগে বলা হয় ... সুতরাং এটি করবেন না:

<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

আনকড রেফারেন্স এরির: গুগল সংজ্ঞায়িত নয় ত্রুটি চলে যাবে যখন মানচিত্রের API স্ক্রিপ্ট ট্যাগ থেকে async ডিফার সরানো হবে ।

Question 6

আপনার সমস্ত কর্মক্ষেত্র অনুসরণ করার পরে আমার পক্ষে কী কাজ করেছিল তা হ'ল এপিআই কল করা:

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

আমি .এএসপি নেট (এমভিসি) ব্যবহার করছি

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 class="map">

এটি:

<div id="map">

Question 9

হতে পারে ব্যবহার

<body onload="initialize();">

পরিবর্তে

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

সাহায্য করতে পারি.