Google मानचित्र API V3 - मार्कर पर क्लिक करें ओवरले के रूप में अधिक जानकारी सामग्री (जैसे Google मानचित्र में)

हम HTML कंटेनर में Google मानचित्र लोड करने के लिए Google Map Api V3 का उपयोग करते हैं। हमारे पास एक स्थान खोज फ़ॉर्म है। सबमिट पर, हम उपलब्ध स्थानों और मानचित्र में मार्कर सेट करेंगे। एक बार मार्कर लोड हो जाने के बाद, प्रत्येक मार्कर पर क्लिक करने के लिए हमें शीर्षक, पता विवरण और डिज़ाइन दिखाना होगा जैसे कि हमारे पास Google मानचित्र में है। (Google नक्शे में - लाल मार्कर पर क्लिक करते समय, हम अधिक जानकारी जैसे सितारे, दिशानिर्देश, आस-पास की खोज, मानचित्र पर सहेजें, और अधिक ..)Google मानचित्र API V3 - मार्कर पर क्लिक करें ओवरले के रूप में अधिक जानकारी सामग्री (जैसे Google मानचित्र में)

क्या हमने एपीआई फ़ंक्शन में बनाया है ऊपर की तरह ओवरले बॉक्स लोड करें। या हमारे पास वर्तमान में Google मानचित्र में हमारे जैसा विवरण लोड करने के लिए फ़ंक्शन नहीं है।

जब मैंने Google और मानचित्र दस्तावेज़ों में खोज की, तो मैं ओवरले विंडो दिखाने और बॉक्स के अंदर सामग्री लिखने के विकल्प देख सकता हूं। लेकिन मुझे आवश्यकतानुसार सामग्री लोड करने के विकल्प नहीं दिख रहे थे।

मैंने संदर्भ के लिए नीचे दिए गए कोड को चिपकाया है।

 var map = null; 
     gmap_ready = function(){ 
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457); 
    var myOptions = { 
     zoom: 3, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

function fnLoadMarkers(){ 
var locations = [ 
    ['S Dakota', 43.834527,-103.564457, 1], 
    ['Texas', 31.428663,-99.418947, 2], 
    ['California', 36.668419,-120.249025, 3], 
    ['Newyork', 43.197167,-76.743166, 4], 
    ['Missouri', 38.410558,-92.73926, 5] 
]; 
setMarkers(map,locations); 
    } 
function setMarkers(map, locations) { 
var image = 'images/marker.gif'; 

for (var i = 0; i < locations.length; i++) { 
    var currLocation = locations[i]; 
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]); 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     icon: image, 
     title: currLocation[0], 
     zIndex: currLocation[3] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     var latitude = this.position.lat(); 
     var longitude = this.position.lng(); 
     window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A"); 
    }); 
    }

}

अगर वहाँ कैसे इन परिणामों को प्राप्त करने के बारे में कोई संकेत है, यह उपयोगी होगा। साथ ही, कृपया गाइड करें, चाहे Google API V3 के माध्यम से यह संभव हो।

अग्रिम धन्यवाद,

सादर

Srinivasan.C

स्रोत

2012-06-12 Srinivasan

चेकआउट InfoBubble पुस्तकालय .. मानक जानकारी विंडो https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows – gorelative

देखो? – Ray

मुझे समझ नहीं आता क्यों एक गूगल मैप्स एपीआई मार्कर से गूगल मैप्स के लिए एक नई विंडो खोलने कर रहे हैं? आप यूआरएल के माध्यम से Google मानचित्र पर जानकारी विंडो नहीं जोड़ सकते हैं।

इस तरह मैं इसे करता हूं।

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
    // Make position for center map 
    var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

    // Map options 
    var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    // Initiate map 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Info window element 
    infowindow = new google.maps.InfoWindow(); 

    // Set pin 
    setPin(data); 
} 
// Show position 
function setPin(data) { 
    var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
    var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
    }); 

    // Listen for click event 
    google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
    }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
    // Create content 
    var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

    // Replace our Info Window's content and position 
    infowindow.setContent(contentString); 
    infowindow.setPosition(pin.position); 
    infowindow.open(map) 
} 
</script> 
</head> 
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
    <div id="map_canvas"> 
</div> 
</body> 
</html>

स्रोत

2012-06-13 18:37:27 transilvlad

@Srinivasan इस मदद किया था में – transilvlad

मुझे लगता है कि ओपी बाएं साइडबार के बारे में बात कर रहा है जो Google मानचित्र पर मानचित्र पिन पर क्लिक करते समय बाहर निकलता है। (यानी maps.google.com infowindow का उपयोग नहीं करता है) –

बहुत ही बढ़िया दोस्त! :) –

Google मानचित्र API V3 - मार्कर पर क्लिक करें ओवरले के रूप में अधिक जानकारी सामग्री (जैसे Google मानचित्र में)

उत्तर

संबंधित मुद्दे