Google मानचित्र एपीआई: मार्कर और भाषण बबल कैसे जोड़ें?

Question

मैं अपनी साइट गूगल मैप्स का जावास्क्रिप्ट एपीआई .. का उपयोग करने पर एक गूगल मानचित्र पाने में कामयाब रहे है और यह बहुत अच्छा काम करता है ...

किसी को भी मुझे बता सकते हैं कैसे मैं स्पीच बबल और मार्कर ... यहाँ चित्र जोड़ सकते हैं ... http://code.google.com/apis/maps/

मूल रूप से अपनी साइट के लिए एक सरल नक्शा प्रदर्शित लेकिन इसकी जहां कार्यालय है के लिए मार्कर और एक स्पीच बबल लापता जहां मैं कार्यालय का पता

किसी भी मदद वास्तव में सराहना की जाएगी रखना चाहते हैं।

यहाँ कोड मैं है अब तक

if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(40.466997, -3.705482), 13); 


} 

Answer 1

एक मार्कर GMarker वर्ग का उपयोग कर जोड़ा जा सकता है; उदाहरण के लिए, एक नक्शा करने के लिए एक बिंदु जोड़ने के लिए, मैं कुछ इस तरह का प्रयोग करेंगे:

var point = new GPoint(45.779915302498935, 4.803814888000488); 
var marker = new GMarker(point); 
map.addOverlay(marker); 

(बेशक, आप अपने कार्यालय के लोगों के निर्देशांक अनुकूल करने के लिए होगा, इसलिए यह नहीं है फ्रांस में कुछ बिंदु इंगित ^^, ​​मैं लोगों को आप चाल करना चाहिए तैनात ;-))

और एक सूचना विंडो के लिए, आप, GMarker.openInfoWindowHhtml विधि का उपयोग कर सकते हैं अपने मार्कर पर लगता है।

मुझे लगता है कि कुछ इस तरह चाल करना चाहिए:

if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(40.466997, -3.705482), 13); 

    var point = new GPoint(-3.705482, 40.466997); 
    var marker = new GMarker(point); // Create the marker 
    map.addOverlay(marker);   // And add it to the map 

    // And open some infowindow, with some HTML text in it 
    marker.openInfoWindowHtml(
     'Hello, <strong>World!</strong>' 
    ); 
} 

और परिणाम इस प्रकार है:

http://extern.pascal-martin.fr/so/question-1933777-1.png

अब, यहाँ से निर्माण करने के लिए आप पर निर्भर ;-)

Answer 2

यहां कुछ कोड है दिखाता है कि एकाधिक मार्कर लोड करने के लिए XML फ़ाइल का उपयोग कैसे करें। this साइट Google मानचित्र उदाहरणों और ट्यूटोरियल के लिए सबसे अच्छी है

// A function to create the marker and set up the event window 
function createMarker(point,name,html) { 
    var marker = new GMarker(point); 
    GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
    }); 
    // save the info we need to use later for the side_bar 
    //gmarkers.push(marker); 
    // add a line to the side_bar html 
    //side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
    return marker; 
} 

// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
    GEvent.trigger(gmarkers[i], "click"); 
} 

$(document).ready(function(){ 
    // When class .map-overlay-right is clicked map is loaded 
    $(".map-overlay-right").click(function() { 
     var map = new GMap2(document.getElementById('map-holder')); 
     $("#map-holder").fadeOut('slow', function(){          
      var gmarkers = []; 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 
      // Get XML file that contains multiple markers 
      $.get("http://www.foo.com/xml-feed-google-maps",{},function(xml) { 
       $('marker',xml).each(function(i) { 
            // Parse the XML Markers 
        html = $(this).text(); 
        lat = $(this).attr("lat"); 
        lng = $(this).attr("lng"); 
        label = $(this).attr("label"); 
        var point = new GLatLng(lat,lng); 
        var marker = createMarker(point,label,html); 
        map.addOverlay(marker); 
       }); 
      }); 

     }); 
     $("#map-holder").fadeIn('slow'); 
     var Asia = new GLatLng(19.394068, 90.000000); 
     map.setCenter(Asia, 4); 
    });  
});