Google मानचित्र v3 - मार्कर

Question

प्रदर्शित नहीं कर रहे हैं मैं Google मानचित्र (API v3) पर एकाधिक मार्कर लगाने की कोशिश कर रहा हूं। मैंने Google दस्तावेज़ों को देखा और यह भी thread पर देखा। मानचित्र init बिंदु पर खींचता है और केंद्र करता है लेकिन मानचित्र पर कोई मार्कर दिखाई नहीं दे रहा है।

फ़ायरबग किसी भी त्रुटि की रिपोर्ट नहीं कर रहा है।

यहाँ जे एस

<script type="text/javascript"> 

    var map; 

    function initialize() { 
      var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(41.056466,-85.3312009), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

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

    //Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker({ 
     position: Latlng_0, 
        title:"0"}); 

     marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker({ 
     position: Latlng_1, 
     title:"1"}); 
     marker_1.setMap(map); 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

देख के लिए धन्यवाद है!

Answer 1

कारण मार्करों दिखाई नहीं दे रहे क्योंकि कोड का वह हिस्सा निष्पादित किया जाता है हो रही से पहले लोड घटना निकाल दिया जाता है और इनिशियलाइज़ विधि लागू हो जाता है - उस बिंदु अपने नक्शे चर पहले से ही बनाई गई है पर, लेकिन अभी भी रिक्त है ।

कोड जोड़ने का प्रयास इनिशियलाइज़ विधि

var map; 

function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    // Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker(
     { 
      position: Latlng_0, 
      title:"0" 
     } 
    ); 

    marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker(
     { 
      position: Latlng_1, 
      title:"1" 
     } 
    ); 

    marker_1.setMap(map); 
} 

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

यहाँ इस jsfiddle देखने के अंदर मार्करों जोड़ने के लिए जहां मार्करों http://jsfiddle.net/KvugB/

Answer 2

मैं इस कोड का उपयोग दिख रहे हैं। मुझे आशा है कि यह आप में मदद करता है:

(function() { 

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(41.056466, -85.3312009), 
     disableDefaultUI: false, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 


    // Creating the JSON data 
    var json = [ 
     { 
      "title": "Title 1", 
      "lat": 41.057814980291, 
      "lng": -85.329851919709, 
      "description": "" 
     }, 
     { 
      "title": "Title 2", 
      "lat": 41.057814981000, 
      "lng": -85.8048, 
      "description": "" 
     }, 
    ] 

    var styles = [ 
    { 
    "featureType": "water", 
    "elementType": "geometry.fill", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#0077bb" }, 
    { "lightness": 70 } 
     ] 
     },{ 
     "featureType": "landscape.natural", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "saturation": -100 }, 
     { "color": "#699e6b" }, 
     { "lightness": 76 } 
     ] 
     },{ 
     "featureType": "poi.park", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "off" } 
     ] 
     },{ 
     "featureType": "road.local", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#ffffff" } 
     ] 
     } 
     ]; 

     map.setOptions({styles: styles}); 



    // Creating a global infoWindow object that will be reused by all markers 
    var infoWindow = new google.maps.InfoWindow(); 

    // Looping through the JSON data 
    for (var i = 0, length = json.length; i < length; i++) { 
     var data = json[i], 
      latLng = new google.maps.LatLng(data.lat, data.lng); 




     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title 
     }); 

     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function(marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 


     })(marker, data); 

    } 

} 

    })(); 

Answer 3

यह @ JoanManuelHernández के जवाब के लिए एक जवाब है, लेकिन मैं एक टिप्पणी में कोड से स्वरूपित नहीं पोस्ट कर सकते हैं।

जोन, आपका समाधान उत्कृष्ट है; यह बहुत ही समान है कि मैं इसे कैसे करूँगा। मार्कर स्थानों की एक सरणी बनाना प्रत्येक के लिए अलग-अलग चर का उपयोग करने से बेहतर तरीका है।

मैं कुछ मामूली सुधारों का सुझाव देना चाहता हूं। एक वह जगह है जहां आपके पास json नामक सरणी है। यह एक बहुत ही वर्णनात्मक नाम नहीं है; json किसी भी प्रकार का डेटा हो सकता है। इसे places या locations या ऐसा कुछ कहने के बारे में कैसे?

अगला, जहां आपके पास लूप है जो एसिंक्रोनस कॉलबैक को संभालने के लिए बंद करता है, मुझे लगता है कि यह समझने में थोड़ा आसान है कि अगर आप पूरे लूप बॉडी को अपने कार्य में ले जाते हैं तो यह कैसे काम करता है। फिर आपको इनलाइन अनाम फ़ंक्शन की आवश्यकता नहीं है। तो यह कोड:

// Looping through the JSON data 
for (var i = 0, length = json.length; i < length; i++) { 
    var data = json[i], 
     latLng = new google.maps.LatLng(data.lat, data.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: data.title 
    }); 

    // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
    (function(marker, data) { 

     // Attaching a click event to the current marker 
     google.maps.event.addListener(marker, "click", function(e) { 
      infoWindow.setContent(data.description); 
      infoWindow.open(map, marker); 
     }); 


    })(marker, data); 
} 

बन जाएगा:

// Looping through the places list 
for(var i = 0, length = places.length; i < length; i++) { 
    addPlace(places[i]); 
} 

// Add one place marker 
function addPlace(place) { 
    var latLng = new google.maps.LatLng(place.lat, place.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: place.title 
    }); 

    // Attaching a click event to the current marker 
    google.maps.event.addListener(marker, "click", function(e) { 
     infoWindow.setContent(place.description); 
     infoWindow.open(map, marker); 
    }); 
} 

यह एक ही बात है, सिर्फ एक छोटे से सरल इस तरह से करता है।

एक अन्य विचार: स्टाइल नक्शा सामान बहुत शांत — मैं स्टाइल किए गए नक्शे के एक बड़े प्रशंसक अपने आप — लेकिन मुझे आश्चर्य है कि अगर यह सरलता के लिए यहाँ से बाहर छोड़ दिया जाना चाहिए, क्योंकि यह से संबंधित नहीं है कर रहा हूँ है ओपी का सवाल?

यदि आप उन्हें पसंद करते हैं तो इन विचारों में से किसी भी विचार को अपने आप में शामिल करने के लिए स्वतंत्र महसूस करें, और अगर किसी और को यह विविधता उपयोगी लगता है, तो कृपया जोन का जवाब ऊपर उठाएं, जहां से मूल कोड आया था।