Auteur Topic: [MAPS API V3] Json file als info window  (gelezen 1043 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
[MAPS API V3] Json file als info window
« Gepost op: maart 23, 2014, 03:18:51 pm »
  • [+1]1
  • [-1]0
  • Hallo [you],

    Ik ben bezig met Google Maps API V3, nu haal ik een aantal locatie uit een json file.... Maar nu wil ik graag dat als je op de marker klikt er dan een infowindow op popt met [icode:khocolc3]description[/icode:khocolc3] als inhoud.... wat is daarvan de makkelijkste manier?

    <script type="text/javascript">
          $( document ).on( "pagecreate", "#locator", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
               
                $.getJSON("foo.json", 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>

    Json file:
    [{
        "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)."
      }]

    Alvast bedankt!

    //[me]
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »