#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    Passing Geolocation API result value to an element through JavaScript


    I am trying to get the alt/long for when I do a query with a city and state.

    I managed to get an alert with the coordinates, but I just cant seem to figuere out how to have it show up on the page when the button is clicked and the "ClickGeocode" is called

    I created a div with id "coords"

    After MUCH trial and error, I'm all out of ideas and would GREATLY appreciate any help Here is what Ive got so far:


    Code:
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
          <script type="text/javascript">
             
             var map = null;
     
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"API Key", mapTypeId:Microsoft.Maps.MapTypeId.road}); 
    
             }
    
             function ClickGeocode(credentials)
             {
                map.getCredentials(MakeGeocodeRequest);
             }
    
             function MakeGeocodeRequest(credentials)
             {
    
                var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(document.getElementById('txtQuery').value) + "&output=json&jsonp=GeocodeCallback&key=" + credentials;
    
                CallRestService(geocodeRequest);
             }
    
             function GeocodeCallback(result) 
             {
                alert("Found location: " + result.resourceSets[0].resources[0].point.coordinates);
                
        
    
    
    
    
    
                if (result &&
                       result.resourceSets &&
                       result.resourceSets.length > 0 &&
                       result.resourceSets[0].resources &&
                       result.resourceSets[0].resources.length > 0) 
                {
                   
    
                 
                  
    
    			
    			
    		
    		
    		
    	
              }  
           }  
    
             function CallRestService(request) 
             {
                var script = document.createElement("script");
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", request);
                document.body.appendChild(script);
             }
    
    
    
    
          </script>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="; width:400px; height:400px;"></div>
          <input id="txtQuery" type="text" value="Portland"/>
          <input type="button" value="Geocode" onclick="ClickGeocode()"/>    
          <div id="coords"></div> 
    
    
       </body>
    </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    You should be able to put the code below, in your GeocodeCallback() function..., where the alert() currently is and it should give you what you looking for (in theory, as you have not given an key; so I cannot test if the alert() is actually producing lat/long coordinates):
    Code:
    document.getElementById("coords").innerHTML = result.resourceSets[0].resources[0].point.coordinates;

IMN logo majestic logo threadwatch logo seochat tools logo