पहचान
यह जवाब भी मेरे ब्लॉग ARTICLE के एक भाग के रूप में पाया जा सकता है। यदि आपके पास समय है तो एक नज़र डालें क्योंकि यह अधिक जानकारी को कवर करता है, फिर अकेले यह जवाब।
एक और अच्छा समाधान है जिसके लिए आईफ्रेम की आवश्यकता नहीं है और इसे जितना उत्तरदायी बनाया जा सकता है। इसे Google मानचित्र v3 एपीआई कहा जाता है।
आधिकारिक प्रलेखन: https://developers.google.com/maps/documentation/javascript/examples/
पहले हमें कैसे Gmap v3 API, एक क्लासिक वेब अनुप्रयोग के अंदर इस्तेमाल किया जा सकता बारे में बात करते हैं, यह हमें एक अच्छा दृष्टिकोण क्या करना है दे देंगे। एक नक्शा की शुरुआत में सनकी iframe एक मानक वितरण समाधान था, लेकिन एक समय के रूप में यह एक पुरानी तकनीक बन गया, और उन्हें एक सफल वितरण तकनीक में बाधा की तरह।
इतिहास
नई JavaScript नक्शे API संस्करण 3 दोनों डेस्कटॉप वेब ब्राउज़र और मोबाइल उपकरणों के लिए एक साफ, तेज और शक्तिशाली नक्शे अनुप्रयोग विकास मंच प्रदान करने के लिए जमीन गूगल द्वारा बनाया गया था। वी 3 एपीआई डेवलपर्स को अपने वेब पेजों में Google मानचित्र को एम्बेड करने देता है और विशेष रूप से Google डिवाइस के साथ-साथ पारंपरिक डेस्कटॉप ब्राउज़र एप्लिकेशन के लिए तेज़ी से और अधिक लागू होने के लिए डिज़ाइन किया गया है।
आईई 6 +, फ़ायरफ़ॉक्स 2.0+ पर काम करने वाले वी 2 एपीआई के विपरीत, क्रोम v3 एपीआई के पुराने संस्करण IE8 +, फ़ायरफ़ॉक्स 3.0 + आईओएस, एंड्रॉइड और ब्लैकबेरी 6+ ब्राउज़र तक के प्रत्येक HTML5 समर्थित ब्राउज़र पर काम करेंगे। जो jQuery मोबाइल अनुप्रयोगों के लिए भी एक उत्कृष्ट समाधान बनाता है। लेकिन मैं आपको दिखाता हूं कि यह क्लासिक वेब पेज में कैसे काम करता है। http://jsfiddle.net/Gajotres/T4H5X/
आप इसे कहीं भी रख सकते हैं, यह आकार बदलने का जवाब देंगे:
समाधान
और यहाँ एक काम उदाहरण है। यह तेज़, भरोसेमंद और लचीला है।
यहाँ एक उदाहरण है:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
और सवाल यह है कि ...? –
आपका उत्तर/सुझाव एचटीएमएल 5 और CSS3 के साथ कुछ भी करने के लिए नहीं है, यह सीएसएस 2 है और इसे 15 साल पहले पेश किया गया है –
हेक यह बंद क्यों है ..closers के साथ टैगिंग किया जाना चाहिए था। सवाल जायज़ हैं; एक Google नक्शे iframe उत्तरदायी कैसे बनाते हैं? यह मानते हुए कि इस प्रश्न में 10+ सितारे हैं और लोग लगभग 25000 बार यहां जा रहे हैं + इसे बंद करने के लिए बेवकूफ था। –