Two months ago i discovered that Geocoding API of google allows 1 map display per day.
Now i'm on a project that needs to display an address marker on a map, since we are in developement phase, i'm not ready to pay 200$ to enable "up to 200$' use of google api.
Here is an alternative using nominatim and openstreetmap.
Long life to opensource.
Be careful, this code supposes that there is one lon,lat forsame address, then you must mention full address to get the waiting for result.
The map displayed at the end of the post is printed using the script above :) where mapdiv is an html div inside your page Be careful when importing jquery (do you have another import ? if you are using cms or already integrated temlplate) If you want to display many addresses you have to iterate through xml nodes print console.log(data); just after function(data, status){ .... to see the xml document returned ... If there is no places with the entered address, same thing you can guess it by reading the xml returned. thanks for reading !
Now i'm on a project that needs to display an address marker on a map, since we are in developement phase, i'm not ready to pay 200$ to enable "up to 200$' use of google api.
Here is an alternative using nominatim and openstreetmap.
Long life to opensource.
Be careful, this code supposes that there is one lon,lat forsame address, then you must mention full address to get the waiting for result.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type= "text/javascript" > /**Part 1 retrieve lat, lon from an address**/ /**Here is the full address of IT department of National Social Security Fund of Tunisia**/ $.get( "https://nominatim.openstreetmap.org/search?q=12+avenue+de+madrid,+1001+tunis+tunisia&format=xml&addressdetails=1" , function (data, status){ $xml = $( data ); $lat = $xml.find( "searchresults" ).find( "place" ).attr( "lat" ); $lon = $xml.find( "searchresults" ).find( "place" ).attr( "lon" ); /** End part one**/ /** Part 2 a display the map with a marker **/ map = new OpenLayers.Map( "mapdiv" ); map.addLayer( new OpenLayers.Layer.OSM()); var lonLat = new OpenLayers.LonLat( $lon ,$lat ) .transform( new OpenLayers.Projection( "EPSG:4326" ), // transform from WGS 1984 map.getProjectionObject() // to Spherical Mercator Projection ); var zoom=16; var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); markers.addMarker( new OpenLayers.Marker(lonLat)); map.setCenter (lonLat, zoom); }) </script> |
The map displayed at the end of the post is printed using the script above :) where mapdiv is an html div inside your page Be careful when importing jquery (do you have another import ? if you are using cms or already integrated temlplate) If you want to display many addresses you have to iterate through xml nodes print console.log(data); just after function(data, status){ .... to see the xml document returned ... If there is no places with the entered address, same thing you can guess it by reading the xml returned. thanks for reading !