2010-05-24 3 views
6

J'essaye de faire une petite application qui prend un état de la ville & et des géocodes qui adressent à un emplacement lat/long. À l'heure actuelle, j'utilise l'API de Google Map, ColdFusion et SQL Server. Fondamentalement les champs de ville et d'état sont dans une table de base de données et je veux prendre ces endroits et obtenir le marqueur mis sur une carte de Google montrant où ils sont.Chargement de la ville/état depuis SQL Server vers Google Maps?

Ceci est mon code pour faire le géocodage, et l'affichage de la source de la page montre qu'il boucle correctement ma requête et place un emplacement ("Omaha, NE") dans le champ d'adresse, mais pas de marqueur, carte pour cette matière, montre sur la page:

function codeAddress() { 
<cfloop query="GetLocations"> 
    var address = document.getElementById(<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>).value; 
     if (geocoder) { 
     geocoder.geocode({<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>: address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      title: <cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput> 
      }); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
     }  
</cfloop> } 

Et est le code ici pour initialiser la carte:

var geocoder; 
var map; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(42.4167,-90.4290); 
    var myOptions = { 
     zoom: 5, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: "Test" 
     }); 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

J'ai un travail de carte qui utilise lat/long qui était dur codé dans la table de la base de données, mais je veux être en mesure d'utiliser la ville/état et de convertir à un lat/long. Des suggestions ou des directives? Stocker le lat/long dans la base de données est également possible, mais je ne sais pas comment le faire dans SQL.

Répondre

4

Vous voudrez peut-être co nsider l'exemple suivant:

Utilisation du V2 API:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    // Prepare this list from ColdFusion 
    var locations = [ 
     'New York, NY', 
     'Los Angeles, CA', 
     'Chicago, IL', 
     'Houston, TX', 
     'Phoenix, AZ' 
    ]; 

    if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map_canvas")); 

     var geocoder = new GClientGeocoder(); 
     var index = 0; 

     var geocoderFunction = function() { 
      geocoder.getLatLng(locations[index], function (point) {  
      if (point) { 
       map.addOverlay(new GMarker(point));     
      } 

      // Call the geocoder with a 100ms delay 
      index++; 
      if (locations.length > index) { 
       setTimeout(geocoderFunction, 100); 
      } 
      }); 
     } 

     map.setCenter(new GLatLng(38.00, -100.00), 3); 

     // Launch the geocoding process 
     geocoderFunction(); 
    } 
    </script> 
</body> 
</html> 

Utilisation du V3 API:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    // Prepare this list from ColdFusion 
    var locations = [ 
     'New York, NY', 
     'Los Angeles, CA', 
     'Chicago, IL', 
     'Houston, TX', 
     'Phoenix, AZ' 
    ]; 

    var mapOpt = { 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     center: new google.maps.LatLng(38.00, -100.00), 
     zoom: 3 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOpt); 

    var geocoder = new google.maps.Geocoder(); 
    var index = 0; 

    var geocoderFunction = function() { 
     geocoder.geocode({ 'address': locations[index] }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      });    
      } 

      // Call the geocoder with a 100ms delay 
      index++; 
      if (locations.length > index) { 
      setTimeout(geocoderFunction, 100); 
      } 
     }); 
    } 

    // Launch the geocoding process 
    geocoderFunction(); 
    </script> 
</body> 
</html> 

Tout ce que vous devez faire est de rendre le tableau JavaScript locations de ColdFusion, au lieu d'utiliser la codé en dur dans l'exemple.

Screenshot de l'exemple ci-dessus:

Google Maps API Geocoding Demo

+0

Merci beaucoup Daniel, je l'ai fait que vous avez dit et converti ma requête à un tableau dans la variable des emplacements et le sortir. Travaillé comme un charme! – knawlejj

+0

@knawlejj: C'est une bonne nouvelle. Je suis content que ça a marché :) –

2

Vous devez réellement ajouter le marqueur à la carte en utilisant la méthode addOverlay:

var point = new GLatLng(...); 
map.addOverlay(new GMarker(point)); 

Vous pouvez également ajouter des instances de la classe marqueur sur votre carte:

map.addOverlay(marker); 

Voir la carte Recouvrements docs:

http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html

Questions connexes