बिना किसी कुंजी के Google मानचित्र का उपयोग कैसे करें? (यूआरएल के साथ स्थैतिक से गतिशील)

Question

मैंने देखा है कि कई उपयोगकर्ताओं ने इस सवाल से पूछा है, लेकिन असल में अभी भी एक कुंजी के बिना Google मानचित्र का उपयोग करने के उदाहरणों के साथ कोई जवाब नहीं है (सभी उत्तरों किसी अन्य वेबपृष्ठों के संदर्भ हैं) ।

मैंने कुंजी के बिना Google मानचित्र का उपयोग करने में कामयाब रहा है, लेकिन मुझे केवल एक स्थिर नक्शा प्राप्त करने में कामयाब रहा। क्या आपको कोई विचार है कि यह गतिशील कैसे है?

var img = new Image(); 

img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true"; 

return img; //OR document.body.appendChild(img); 

यहां तक ​​कि अगर आप बस इस लिंक पर क्लिक आप नक्शे को देख सकते हैं, और यदि आप "Url गुण" बदलते हैं तो आप "संपादित करें" नक्शा कर सकते हैं: http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

मैं जब कहते हैं कि "गतिशील नक्शा" के रूप में @geocodezip कहा https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

Answer 1

, आप गूगल मा की तलाश कर रहे हैं: मैं इस तरह somethins का मतलब पीएस जावास्क्रिप्ट v3।

यहां इसका उपयोग करने का सरल उदाहरण है (मेरे old answer से चुना गया), इसके लिए किसी भी कुंजी की आवश्यकता नहीं है।

HTML:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<div id="map-canvas"></div> 

सीएसएस:

#map-canvas { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     } 

जावास्क्रिप्ट:

function initialize() { 
    var myLatlng = new google.maps.LatLng(43.565529, -80.197645); 
    var mapOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    //=====Initialise Default Marker  
    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'marker' 
    //=====You can even customize the icons here 
    }); 

    //=====Initialise InfoWindow 
    var infowindow = new google.maps.InfoWindow({ 
     content: "<B>Skyway Dr</B>" 
    }); 

    //=====Eventlistener for InfoWindow 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

मैं एक 012,344,509 बनाया हैआपके संदर्भ के लिए।

आशा है कि आपको कुछ विचार मिलेगा।

चूंकि आप कुंजी का उपयोग करने में रुचि नहीं रखते हैं, Beware of the limits।

Google मानचित्र जावास्क्रिप्ट एपीआई: प्रत्येक सेवा के लिए प्रति दिन 25,000 मानचित्र लोड तक।

इसमें शामिल हैं:

1. मानचित्र मानचित्र JavaScript API (V2 या V3) जब
   एक वेब पेज या आवेदन द्वारा लोड का उपयोग कर प्रदर्शित किया जाता है;
2. एक सड़क दृश्य पैनोरमा एक वेब पेज या एप्लिकेशन द्वारा मैप्स जावास्क्रिप्ट एपीआई (वी 2 या वी 3) का उपयोग करके प्रदर्शित किया गया है जिसने मानचित्र भी प्रदर्शित नहीं किया है;
3. फ्लैश के लिए मैप्स एपीआई लोड करने वाला एक एसडब्ल्यूएफ एक वेब पेज या एप्लिकेशन द्वारा लोड किया जाता है; या
4. स्टेटिक मैप्स एपीआई से मानचित्र छवि के लिए एक ही अनुरोध किया गया है।
5. स्ट्रीट व्यू छवि API से पैनोरामा छवि के लिए एक ही अनुरोध किया गया है।

अपनी टिप्पणी से,

मैं भी canvas उपयोग करने की कोशिश, यह काम नहीं कर रहा था।

var mapCanvas = document.createElement("canvas"); 

लेकिन यह div तत्व के साथ अच्छा काम कर रहा है।

var mapCanvas = document.createElement("div"); 
mapCanvas.style.width = "200px"; 
mapCanvas.style.height = "200px"; 

Updated JSFiddle

चौड़ाई और ऊंचाई गुणों को सेट करने मत भूलना।

Answer 2

का प्रयोग करें Google Maps Javascript API v3 (good examples in the documentation के बहुत सारे)

Answer 3

एंड्रॉयड फोन

href = "google.streetview:cbll=51.470305,-0.183842&cbp=1,10,,0,2.0&mz=mapZoom" 

से यह कोशिश अपने लंगर लिंक

Answer 4

यह मेरे लिए काम किया है करने के लिए इस जोड़ें। मैंने इसे स्थानीयहोस्ट पर करने की कोशिश की। स्टैक ओवरफ्लो में कई अन्य समाधानों में मदद नहीं मिली।

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&amp;output=embed"></iframe><br /> 

इस तरह हम पिछली छोर में दर्ज पते के आधार पर गतिशील रूप से मानचित्र उत्पन्न कर सकते हैं।

Answer 5

मैं plunker

http://plnkr.co/T4eULTnKbWCKlABPI4pu

और कोड

<!DOCTYPE html> 
<html> 
<body> 

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br /> 

</body> 
</html>