2012-02-23 14 views
5

सभी, संख्या मैं अपने नक्शे पर मेरी मार्कर दिखा निम्नलिखित कोड मिल गया है:प्रदर्शन पर गूगल मैप्स के लिए मार्कर

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func 
} else { 
    window.onload = function() { 
     oldonload(); 
     func(); 
    } 
} 
} 

var map, 
    infowin=new google.maps.InfoWindow({content:'moin'}); 
function loadMap() 
{ 
    map = new google.maps.Map(
    document.getElementById('map'), 
    { 
     zoom: 12, 
     mapTypeId:google.maps.MapTypeId.ROADMAP, 
     center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>, 
            <?php echo $_SESSION['pav_event_longitude']; ?>) 
    }); 

    addPoints(myStores); 
} 

function addPoints(points) 
{ 
    var bounds=new google.maps.LatLngBounds(); 
    for (var p = 0; p < points.length; ++p) 
    { 
    var pointData = points[p]; 
    if (pointData == null) {map.fitBounds(bounds);return; } 
    var point = new google.maps.LatLng(pointData.latitude, pointData.longitude); 
    bounds.union(new google.maps.LatLngBounds(point)); 
    createMarker(point, pointData.html); 
    } 
    map.fitBounds(bounds); 

} 

function createMarker(point, popuphtml) 
{ 
    var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>"; 
    var marker = new google.maps.Marker(
    { 
     position:point, 
     map:map 
    } 
); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowin.setContent(popuphtml) 
     infowin.open(map,marker); 
    }); 

} 
function Store(lat, long, text) 
{ 
    this.latitude = lat; 
    this.longitude = long; 
    this.html = text; 
} 

var myStores = [<?php echo $jsData;?>, null]; 
addLoadEvent(loadMap); 
</script> 

यह महान काम करता है। हालांकि मैं कहने की कोशिश कर रहा हूं कि मार्कर पर एक संख्या जोड़ें ताकि लोग Google मानचित्र में मार्कर के साथ मेरी साइट पर नंबर को जोड़ सकें। मैं अपने मार्करों के शीर्ष पर नंबर बनाने के बारे में कैसे जा सकता हूं (वास्तविक आइकन के शीर्ष पर और जानकारी बबल में नहीं)?

किसी भी मदद की बहुत सराहना की जाएगी! अग्रिम में धन्यवाद!

+0

मार्कर लिंक पर क्लिक करें, हम नंबर दे सकते हैं? लेकिन मुझे आइकन –

उत्तर

7

EDIT: यह API अब बहिष्कृत है, और अब मैं इस उत्तर की अनुशंसा नहीं कर सकता।


आप पिन छवि उत्पन्न करने के लिए Google के चार्ट एपीआई का उपयोग कर सकते हैं।

देखें: http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins

यह बनाने के लिए और मानकों को आपके द्वारा निर्दिष्ट से एक मार्कर की एक छवि में लौटेंगे। एक उदाहरण उपयोग होगा: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2|FF776B|000000

अपने गूगल मानचित्र में इसे लागू करने के लिए, यह नया मार्कर में जोड़ा जा सकता है() कोड:

var number = 2; // or whatever you want to do here 
var marker = new google.maps.Marker(
    { 
     position:point, 
     map:map, 
     icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000', 
     shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow' 
    } 
); 
+0

पर ओवरले नंबर रखने के तरीके नहीं मिलते हैं, यह बहुत अच्छा काम करता है लेकिन मैं अपने createMarker फ़ंक्शन को प्रदर्शित करने के लिए एक गतिशील चर कैसे पारित कर सकता हूं? यदि आप नंबर 2 में हार्ड कोड करते हैं तो यह बहुत अच्छा काम करता है लेकिन मुझे यकीन नहीं है कि फ़ंक्शन में सही संख्या में कैसे पास किया जाए। – user1048676

+0

@ user1048676 इसके साथ शुरू करने के लिए ऐसा लगता है कि आप अपने 'addMarker()' फ़ंक्शन में एक और पैरामीटर जोड़ सकते हैं, इसलिए यह कुछ 'फ़ंक्शन createMarker (पॉइंट, popuphtml, संख्या)' बन जाता है। जहां आप पास करने के लिए संख्या प्राप्त करते हैं, आप 'add'oints 'फ़ंक्शन में' p' iterator का उपयोग कर सकते हैं। तो, 'createMarker (point, pointData.html, p); हालांकि, अगर आपको अपने PHP के साथ संगत होने की संख्या की आवश्यकता है (उदाहरण के लिए। यदि वह पृष्ठ पर कहीं और आउटपुट कर रहा है, जो यह कैसा लगता है), तो आपको आवश्यकता हो सकती है यह दर्शाता है कि आपके ' ', और एचटीएमएल की तरह इसे पास करने, एक संख्या संपत्ति का उपयोग करें। – Rick

+0

@ रिक, यह एक अच्छा समाधान है, [Google चार्ट एपीआई का इन्फोग्राफिक्स हिस्सा] (https://developers.google.com/chart/infographics/) (ऊपर आपका लिंक) आधिकारिक तौर पर बहिष्कृत कर दिया गया है। – johntrepreneur

1

Here एक सेवा एक रिक द्वारा वर्णित के समान है - लेकिन अभी भी सक्रिय है और आप अपनी मार्कर छवि अपलोड कर सकते हैं।

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