click here to register | Forgot Password?
submit login information
search button
NAVTEQ Logo_Click to go back to homepage     Store Map Reporter Developers Merchants     About Us
Buy a
Map
Update		 Report Map
Changes		 NAVTEQ
Network for
Developers 		Put your Brand
on our Map 		 
 
  • Most Read
  • Top Searches
  • Top Rated
  • My Profile

      If you're a member, please login to see this information.

      If you're not a member, then become one now

  • My Favorites

      If you're a member, please login to see this information.

      If you're not a member, then become one now

  • Recently Viewed

      If you're a member, please login to see this information.

      If you're not a member, then become one now

  • Share & Save
blogspot facebook twitter linkedin youtube flickr

Score:
Login to rate page
Map24 AJAX API 1.2.8

Geocoding Basics

This code example shows how to use the geocoder of the Map24 AJAX API. The user can enter search requests in an input field that is put below the map. After the user has pressed the search button, the geocoder calculates the corresponding geographic coordinates and returns them. Subsequently, the map is centered on that coordinates. For more details about geocoding consider the step-by-step description:

Step-by-Step Description

View example

Executable code:

<html>
  <head>
    <script language="javascript" src="http://api.map24.com/ajax/1.2.8/"></script>
    <script language="javascript">
      var map = null;
      
      function goMap24(){
          map = Map24.Webservices.getMap24Application({
          AppKey: "CJX085789832fa2470d0b05473c290a0X12",
          MapArea: document.getElementById( "maparea" ),
          MapWidth: 710,
          MapHeight: 500
        });
      }
      
      function geocode( addressString ){
        map.Webservices.sendRequest(        
          new Map24.Webservices.Request.MapSearchFree(map, {
            SearchText: addressString,
            MaxNoOfAlternatives: 50
          })
        );
        
        map.onMapSearchFree = function( event ){
          var mrcContainer = new Map24.Webservices.Request.MapletRemoteControl( map );
          var firstResult = event.Alternatives[0];
          var lon = firstResult.Coordinate.Longitude;
          var lat = firstResult.Coordinate.Latitude;
          
          mrcContainer.push(
            new Map24.Webservices.MRC.SetMapView({
              Coordinates: new Map24.Coordinate( lon, lat ),
              ClippingWidth: new Map24.Webservices.ClippingWidth(
                { MinimumWidth: 5000 }              
              )
            })
          );
          map.Webservices.sendRequest( mrcContainer );
        }
      }
    </script>
  </head>
  
  <body onload="goMap24()">
    <div id="maparea"></div>
    <input id="req" type="text" style="margin-top:8px" size=40 maxlength=50>
    <br>
    <input type="submit" style="margin-top:5px" value="Search!" 
           onclick="return geocode(document.getElementById('req').value)">
  </body>
</html>