की अलग फ़ाइलों में init जब मैं अपने गूगल मैप्स एपीआई का टुकड़ा था:कैसे गूगल मैप्स के लिए एक कॉलबैक बनाने के लिए एक वेब अनुप्रयोग
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
index.html में, मैं त्रुटि मिली: Uncaught InvalidValueError: initMap is not a function।
मैं अपने Yemen-scaffolded AngularJS वेब ऐप पर अपने index.html फ़ाइल में अपने सभी bower_component, सीएसएस, एपीआई, और स्क्रिप्ट घोषणाओं को रखना चाहता हूं। जिस मानचित्र को मैं वास्तव में पुन: बनाने की कोशिश कर रहा था वह एक और मार्ग पर होगा, चलो इसे "afterlogin" मार्ग पर कॉल करें, बस basic map। मैंने जेएस और एचटीएमएल एचटीएमएल घटकों को afterlogin.js और afterlogin.html
इस के लिए कई संभावित कारण हैं। इनमें से एक नामस्थान से मेल खाने के लिए कॉल समायोजित करने के मामले के रूप में प्रस्तुत किया गया था, https://stackoverflow.com/a/34466824/1923016। क्या इसके लिए एक कोणीय सेवा की आवश्यकता होगी? यदि हां, तो सेवा initMap फ़ंक्शन और Google मानचित्र एपी स्निपेट में इसकी कॉल में कैसे काम करेगी?
जटिलताओं में से एक आदेश है। मैं वेब ऐप देव के लिए नया हूं, लेकिन इससे पहले कि मैं index.html पहले लोड कर सकता हूं, initMap फ़ंक्शन पर कॉलबैक बनाने के लिए स्निपेट में यूआरएल का उपयोग करता है जो <script>...</script> में index.html फ़ाइल में और app.js फ़ाइल में नहीं दिखाया गया है। इसके बजाए, चूंकि init फ़ंक्शन किसी रूट के जेएस कोड में है, इसलिए इसे देखा नहीं जा सकता है, इसलिए कॉल के किसी भी प्रकार के "नेमस्पेस" संस्करण की आवश्यकता है। यह लॉगिन मार्ग से भी एक कंसोल त्रुटि की ओर जाता है, जो मानचित्र के लिए div भी नहीं है।
---- संपादित करें: ----
भी ध्यान रखें कि इस मामले में, इस चाल नहीं किया:
window.initMap = function(){
//...
}
यह भी लागू नहीं होता है, समारोह के रूप में कभी नहीं कहा जाता है: Uncaught InvalidValueError: initMap is not a function
- - - - - -
afterlogin.js
angular.module('myappproject').controller('AfterloginCtrl', function ($scope) {
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: -33.8666, lng: 151.1958},
query: 'Google, Sydney, Australia'
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
});
<!DOCTYPE html>
<html>
<head>
<title>after login page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
ए विशेषता 'async' को हटाने का प्रयास करें तो आपको कॉलबैक की आवश्यकता नहीं है। बी। आप एक मॉड्यूल का उपयोग कर सकते हैं जैसे [कोणीय Google मानचित्र] (http://angular-ui.github.io/angular-google-maps/#!/) –
@MoshFeu कोई और त्रुटि नहीं, लेकिन कोई नक्शा – AlleyOOP
दिखा रहा है यह नहीं करता है 'नियंत्रक' के अंत में 'initMap' को कॉल करने का प्रयास करें। –