2010-11-01 4 views
1

Je veux implémenter la carte google dans ma page. Dans ma page il y a une zone de texte et un bouton. L'utilisateur doit entrer l'emplacement pour lequel il veut avoir la carte. Ensuite, en cliquant sur le bouton, la carte devrait apparaître dans un div.Comment mettre en œuvre Google Maps dans ma page en utilisant C#

Quelqu'un pourrait-il me fournir les steos pour le faire?

Merci d'avance.

+1

Etes-vous sûr de vouloir dire C#, il me semble que vous voulez faire cela du côté client en utilisant Javascript? –

Répondre

4

Ceci est assez facile si vous utilisez le fichier js api google. À titre de référence, vous pouvez utiliser ce lien: http://code.google.com/apis/maps/documentation/javascript/reference.html

  1. Ajouter la bibliothèque API jQuery et GoogleMaps dans la section HEAD:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    
  2. Ajouter un nouveau tag pour créer les google maps objet dans le div :

    var geocoder; 
    var map; 
    $(document).ready(function() { 
        /* Create the geocoder */ 
        geocoder = new google.maps.Geocoder(); 
        /* Some initial data for the map */ 
        mapOptions = { 
         zoom: 10, 
         center: new google.maps.LatLng(48.13, 13.58), 
         mapTypeId: google.maps.MapTypeId.TERRAIN 
        }; 
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    }; 
    
  3. Ajouter le gestionnaire de clic pour le bouton:

    $('#idMyButton').click(function() { 
        if (geocoder) { 
         var address = $('#idMyTextbox').val(); 
         geocoder.geocode({ 'address': address}, function(results, status) { 
          if (status == google.maps.GeocoderStatus.OK) { 
           /* Position the map */ 
           map.panTo(results[0].geometry.location); 
           /* Put a marker */ 
           new google.maps.Marker({ 
            map: map, 
            position: results[0].geometry.location, 
            title: address, 
          }); 
         } 
         else 
          alert('Address not found'); 
         }; 
        } 
    }); 
    

J'espère que cela aidera.

Questions connexes