Google मानचित्र - बाहरी जेसन

से एकाधिक मार्कर मुझे Google मानचित्र में एकाधिक मार्कर जोड़ना है, लेकिन डेटा एक बाहरी जेसन फ़ाइल में है।Google मानचित्र - बाहरी जेसन

फिलहाल मैं इस

var json = [ 
    { 
    "title": "Stockholm", 
    "lat": 59.3, 
    "lng": 18.1, 
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
    }, 
    { 
    "title": "Oslo", 
    "lat": 59.9, 
    "lng": 10.8, 
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
    }, 
    { 
    "title": "Copenhagen", 
    "lat": 55.7, 
    "lng": 12.6, 
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
    } 
]; 



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 
    }); 
}

है जैसे कि यह चल रहा है अब एक दूसरी फ़ाइल में JSON फ़ाइल exlude की कोशिश कर रहा im, लेकिन sadyl मैं यह काम करने के लिए प्राप्त नहीं कर सकते, (

कोड

$.getJSON("foo.txt", function(json1) { 

}); 


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 
    }); 
}

foo.txt

{ 
    "title": "Stockholm", 
    "lat": 59.3, 
    "lng": 18.1, 
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
    }, 
    { 
    "title": "Oslo", 
    "lat": 59.9, 
    "lng": 10.8, 
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
    }, 
    { 
    "title": "Copenhagen", 
    "lat": 55.7, 
    "lng": 12.6, 
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
    }

आपकी मदद के लिए धन्यवाद

स्रोत

2013-02-28 Maxi

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

$.getJSON("foo.txt", function(json1) { 
    $.each(json1, function(key, data) { 
     var 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 
     }); 
    }); 
});

संपादित करें:

यहाँ एक काम कर उदाहरण google maps tutorial पर आधारित है। आपको सही फ़ाइल foo.txt:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
     var map; 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(58, 16), 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.getJSON("foo.txt", function(json1) { 
      $.each(json1, function(key, data) { 
      var 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, 
       title: data.title 
      }); 
      marker.setMap(map); 
      }); 
     }); 
     }); 
    </script> 
    </body> 
</html>

स्रोत

2013-02-28 20:26:25 halex

धन्यवाद आदमी, जो वास्तव में मदद की है: http: डी – Maxi

आप इस उपकरण के साथ JSON सिंटैक्स की जाँच कर सकते हैं: //jsonlint.com/ - उम्मीद है कि यह –

मदद करता है धन्यवाद, यह बिना किसी परेशानी या किसी भी बदलाव के काम करता है! – Danish

प्रदान किया गया उदाहरण हैलेक्स मेरे लिए काम नहीं करता है। मैंने स्क्वायर ब्रैकेट को foo.txt में एक सरणी के रूप में घोषित करने और HTML फ़ाइल तक पहुंचने के लिए वेब सर्वर चलाने के बजाय इसे ब्राउज़र में खोलने के बजाय इसे सॉर्ट करके सॉर्ट किया।

मैं भी एक देरी जोड़ने की जरूरत:

setTimeout(function(){marker.setMap(map);}, 1000);

अब यह खूबसूरती से काम करता है!

स्रोत

2017-04-03 14:43:18 mattsnow

गूगल के नक्शे प्रलेखन में आप एक उदाहरण देख सकते हैं: https://developers.google.com/maps/documentation/javascript/importing_data

JQuery की जरूरत नहीं

<div id="map"></div> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: new google.maps.LatLng(2.8,-187.3), 
     mapTypeId: 'terrain' 
    }); 

    // Create a <script> tag and set the USGS URL as the source. 
    var script = document.createElement('script'); 
    // This example uses a local copy of the GeoJSON stored at 
    // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp 
    script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
    window.eqfeed_callback = function(results) { 
    for (var i = 0; i < results.features.length; i++) { 
     var coords = results.features[i].geometry.coordinates; 
     var latLng = new google.maps.LatLng(coords[1],coords[0]); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map 
     }); 
    } 
    } 
</script>

स्रोत

2017-05-12 14:13:11 rafa226

Google मानचित्र - बाहरी जेसन

उत्तर

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