javascript - Google मानचित्र जेएस एपीआई v3-सरल एकाधिक मार्कर उदाहरण

google-maps google-maps-api-3 (8)

Google मानचित्र एपीआई के लिए बिल्कुल नया। मुझे डेटा की एक सरणी मिली है जिसे मैं मानचित्र पर साइकिल बनाना और साजिश करना चाहता हूं। काफी सरल लगता है, लेकिन मुझे मिले सभी मल्टी-मार्कर ट्यूटोरियल काफी जटिल हैं।

उदाहरण के लिए Google की साइट से डेटा सरणी का उपयोग करें:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

मैं बस इन सभी बिंदुओं को साजिश करना चाहता हूं और जानकारी प्रदर्शित करने के लिए क्लिक करते समय एक जानकारी प्राप्त करें।

स्वीकृत उत्तर, ES6 में पुनः लिखा गया:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})

अपने कार्यक्रम में एक मार्कर जोड़ें बहुत आसान है। आपको बस यह कोड जोड़ना होगा:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

निम्नलिखित फ़ील्ड विशेष रूप से महत्वपूर्ण होते हैं और मार्कर बनाने के दौरान आमतौर पर सेट होते हैं:

position (आवश्यक) मार्कर के प्रारंभिक स्थान की पहचान करने वाले लैट्लिंग को निर्दिष्ट करती है। एक LatLng पुनर्प्राप्त करने का एक तरीका Geocoding सेवा का उपयोग कर है।
map (वैकल्पिक) मार्कर को रखने के लिए मानचित्र निर्दिष्ट करता है। यदि आप मार्कर के निर्माण पर मानचित्र निर्दिष्ट नहीं करते हैं, तो मार्कर बनाया गया है लेकिन मानचित्र (या प्रदर्शित) से जुड़ा नहीं है। आप मार्कर की setMap() विधि को कॉल करके बाद में मार्कर जोड़ सकते हैं।

नोट , उदाहरण में, शीर्षक फ़ील्ड मार्कर का शीर्षक सेट करता है जो टूलटिप के रूप में दिखाई देगा।

आप here Google एपीआई दस्तावेज से परामर्श ले सकते here ।

मानचित्र में एक मार्कर सेट करने के लिए यह एक पूर्ण उदाहरण है। सावधान रहें, आपको अपनी Google एपीआई कुंजी द्वारा YOUR_API_KEY को प्रतिस्थापित YOUR_API_KEY :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

अब, यदि आप मानचित्र में किसी सरणी के मार्कर प्लॉट करना चाहते हैं, तो आपको ऐसा करना चाहिए:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
    });

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

यह उदाहरण मुझे निम्नलिखित परिणाम देता है:

आप अपने पिन में एक जानकारीविंडो भी जोड़ सकते हैं। आपको बस इस कोड की आवश्यकता है:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

आपके पास जानकारी के बारे में Google का दस्तावेज here विन्डोज़ हो सकता here ।

अब, जब हम मार्कर इस तरह "clik" है, तो हम जानकारी विन्डो खोल सकते हैं:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

नोट , आप here Google डेवलपर में Listener बारे में कुछ दस्तावेज प्राप्त कर सकते हैं।

और, आखिरकार, यदि उपयोगकर्ता उस पर क्लिक करता है तो हम एक मार्कर में एक जानकारी विन्डो प्लॉट कर सकते हैं। यह मेरा पूरा कोड है:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

आम तौर पर, आपको यह परिणाम होना चाहिए:

नक्शा अचल संपत्ति को बचाने के लिए मैंने एक और संस्करण लिखा है, जो वास्तविक अक्षांश और मार्कर के लंबे समय पर इन्फॉइंडो पॉइंटर रखता है, जबकि अस्थायी रूप से मार्कर को छुपाते समय अस्थायी रूप से छुपाया जाता है।

यह मानक 'मार्कर' असाइनमेंट से भी दूर है और मार्कर निर्माण पर मार्कर सरणी में सीधे नए मार्कर को असाइन करके प्रोसेसिंग को गति देता है। ध्यान दें, हालांकि, अतिरिक्त गुण मार्कर और इन्फॉइंडो दोनों में जोड़े गए हैं, इसलिए यह दृष्टिकोण एक अपरंपरागत है ... लेकिन यह मैं हूं!

इन infowindow सवालों में इसका कभी भी उल्लेख नहीं किया गया है, कि मानक infowindow मार्कर बिंदु के lat और lng पर नहीं बल्कि मार्कर छवि के शीर्ष पर रखा गया है। इस काम के लिए मार्कर दृश्यता छिपी जानी चाहिए, अन्यथा मैप्स एपीआई फिर से मार्कर छवि के शीर्ष पर infowindow एंकर को फेंक देगा।

'मार्कर' सरणी में मार्करों के संदर्भ को बाद में वांछित किए जा सकने वाले किसी अतिरिक्त प्रोसेसिंग कार्यों के लिए मार्कर घोषणा पर तुरंत बनाया जाता है (छुपाएं / दिखाना, तारों को पकड़ना आदि ...)। यह 'मार्कर' पर मार्कर ऑब्जेक्ट को असाइन करने का अतिरिक्त चरण बचाता है, और उसके बाद 'मार्कर' को मार्कर सरणी में दबाता है ... मेरी पुस्तक में बहुत अनावश्यक प्रसंस्करण।

वैसे भी, infowindows पर एक अलग ले, और उम्मीद है कि यह आपको सूचित करने और प्रेरित करने में मदद करता है।

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

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

यहां एक काम कर रहे JSFiddle है

अतिरिक्त नोट
आप इस दिए गए Google उदाहरण डेटा में 'स्थानों' सरणी में एक चौथा स्थान पर एक नंबर के साथ नोटिस करेंगे। उदाहरण में यह देखते हुए, आप वर्तमान लूप मान के स्थान पर मार्कर आईडी के लिए इस मान का भी उपयोग कर सकते हैं, जैसे कि ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

मैंने सोचा कि मैं इसे यहां रखूंगा क्योंकि यह Google मानचित्र API का उपयोग शुरू करने वालों के लिए एक लोकप्रिय लैंडिंग पॉइंट प्रतीत होता है। क्लाइंट साइड पर प्रदान किए गए एकाधिक मार्कर शायद प्रदर्शन के अनुसार कई मैपिंग अनुप्रयोगों का पतन हो सकते हैं। बेंचमार्क करना, ठीक करना और कुछ मामलों में भी एक मुद्दा स्थापित करना है (ब्राउज़र कार्यान्वयन मतभेदों के कारण, ग्राहक के लिए उपलब्ध हार्डवेयर, मोबाइल डिवाइस, सूची जारी है)।

इस मुद्दे को हल करने का सबसे आसान तरीका मार्कर क्लस्टरिंग समाधान का उपयोग करना है। मूल विचार एक समूह में भौगोलिक दृष्टि से समान स्थानों को समूहित करने के लिए प्रदर्शित अंकों की संख्या के साथ समूह करना है। चूंकि उपयोगकर्ता मानचित्र में ज़ूम करता है, इसलिए ये समूह नीचे के व्यक्तिगत मार्करों को प्रकट करने के लिए विस्तारित होते हैं।

शायद लागू करने के लिए सबसे सरल markerclusterer पुस्तकालय है। निम्नानुसार एक बुनियादी कार्यान्वयन होगा (लाइब्रेरी आयात के बाद):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

सीधे मानचित्र पर जोड़े जाने के बजाय मार्कर को सरणी में जोड़ा जाता है। यह सरणी तब लाइब्रेरी में पास की जाती है जो आपके लिए जटिल गणना को नियंत्रित करती है और मानचित्र से जुड़ी होती है।

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

अन्य कार्यान्वयन Google से उपलब्ध हैं।

उम्मीद है कि यह मैपिंग की बारीकियों के लिए उन नए लोगों में से कुछ को सहायता प्रदान करता है।

यहां एक अद्वितीय title और infoWindow टेक्स्ट के साथ लोड होने वाले एकाधिक मार्करों का एक और उदाहरण दिया गया है। नवीनतम Google मानचित्र API V3.11 के साथ परीक्षण किया गया।

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

250 मार्करों का स्क्रीनशॉट:

यह अद्वितीय बनाने के लिए स्वचालित रूप से लैट / एलएनजी को यादृच्छिक बना देगा। यदि आप 500, 1000, xxx मार्कर और प्रदर्शन का परीक्षण करना चाहते हैं तो यह उदाहरण बहुत उपयोगी होगा।

यहां एक पूर्ण उदाहरण जावास्क्रिप्ट फ़ंक्शन है जो JSONObject में परिभाषित एकाधिक मार्करों को अनुमति देगा।

यह केवल मार्करों को प्रदर्शित करेगा जो मानचित्र की सीमाओं के साथ हैं।

यह महत्वपूर्ण है कि आप अतिरिक्त काम नहीं कर रहे हैं।

आप मार्करों की सीमा भी निर्धारित कर सकते हैं ताकि आप मार्करों की अत्यधिक मात्रा नहीं दिखा रहे हों (यदि आपके उपयोग में किसी चीज़ की संभावना है);

यदि नक्शा का केंद्र 500 मीटर से अधिक नहीं बदला है तो यह मार्कर प्रदर्शित नहीं करेगा।
यह महत्वपूर्ण है क्योंकि यदि कोई उपयोगकर्ता मार्कर पर क्लिक करता है और ऐसा करते समय गलती से मानचित्र को ड्रैग करता है तो आप नहीं चाहते कि नक्शा मार्कर को फिर से लोड करें।

मैंने इस फ़ंक्शन को मानचित्र के लिए निष्क्रिय ईवेंट श्रोता में संलग्न किया है ताकि मार्कर केवल तभी दिखाए जाए जब नक्शा निष्क्रिय हो और अलग-अलग ईवेंट के बाद मार्कर को फिर से चलाया जा सके।

एक्शन स्क्रीन शॉट में स्क्रीन शॉट में थोड़ा बदलाव होता है जो इन्फॉंडो में अधिक सामग्री दिखाता है। pastbin.com से चिपकाया

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

डैनियल वासलो के जवाब के बाद , यहां एक ऐसा संस्करण है जो बंद करने के मुद्दे को सरल तरीके से सौदा करता है।

चूंकि सभी मार्करों के पास एक व्यक्तिगत इन्फोविंडो होगा और चूंकि जावास्क्रिप्ट परवाह नहीं है, यदि आप किसी ऑब्जेक्ट में अतिरिक्त गुण जोड़ते हैं, तो आपको केवल मार्कर के गुणों में एक इन्फोविंडो जोड़ना होगा और फिर .open() पर .open() को कॉल करना .open() अपने आप!

संपादित करें: पर्याप्त डेटा के साथ, पेजेलोड में बहुत समय लग सकता है, इसलिए मार्कर के साथ इन्फोविंडो के निर्माण के बजाय, निर्माण केवल तभी किया जाना चाहिए जब आवश्यक हो। ध्यान दें कि InfoWindow बनाने के लिए उपयोग किए जाने वाले किसी भी डेटा को मार्कर को एक संपत्ति ( data ) के रूप में जोड़ा जाना चाहिए। यह भी ध्यान रखें कि पहली क्लिक घटना के बाद, infoWindow इसके मार्कर की संपत्ति के रूप में जारी रहेगा ताकि ब्राउज़र को लगातार पुनर्निर्माण की आवश्यकता न हो।

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
}

पूर्ण कामकाजी उदाहरण। आप बस कॉपी, पेस्ट और उपयोग कर सकते हैं।