Mysql
 sql >> Base de données >  >> RDS >> Mysql

Chargement des marqueurs du fichier XML vers l'API Google Map

  1. vous n'appelez pas loadXMLFile()
  2. vous n'incluez pas la bibliothèque jquery
  3. vous ne créez pas google.maps.Markers (on dirait que vous avez plutôt la syntaxe d'une API nokia).

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
    
      html, body, #map-canvas
      {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
    
    var map = null;
    function initialize()
    {
    
       var mapOptions =
           {
                zoom: 12,
                center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
           };
    
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
       loadXMLFile();
     }
    
     function loadXMLFile(){
        var filename = 'v3_SO_20140124_markers.xml';
        $.ajax({
                type: "GET",
                url: filename ,
                dataType: "xml",
                success: parseXML,
                error : onXMLLoadFailed
        });
    
      function onXMLLoadFailed(){
        alert("An Error has occurred.");
      }
    
      function parseXML(xml){
        var bounds = new google.maps.LatLngBounds();
         $(xml).find("marker").each(function(){
                //Read the name, address, latitude and longitude for each Marker
                var nme = $(this).find('name').text();
                var address = $(this).find('address').text();
                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var markerCoords = new google.maps.LatLng(parseFloat(lat), 
                                                          parseFloat(lng));
                bounds.extend(markerCoords);
                var marker = new google.maps.Marker({position: markerCoords, map:map});
            });
            map.fitBounds(bounds);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    

exemple pratique