Using Address Instead Of Longitude And Latitude With Google Maps API

Question

I ve heard that it is possible to submit an Address instead of Longitude and Latitude and this would be much more feasible for my system  The user has to input their address when creating their profile and their profile afterwards will then display a Google Maps of their house  I currently have the Google Maps API working perfectly with Longitude and Latitude    lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8   gt   lt link rel  stylesheet  type  text css  href  css css    gt       lt title gt Login Page lt  title gt    lt meta name  viewport  content  initial-scale 1 0  user-scalable no    gt   lt style type  text css  gt    html   height  100      body   height  100   margin  0  padding  0      map-canvas   height  100     lt  style gt   lt script type  text javascript    src  https   maps googleapis com maps api js key MYKEY amp sensor false  gt   lt  script gt   lt script type  text javascript  gt    function initialize         var mapOptions       center  new google maps LatLng 52 640143 1 28685         zoom  15        mapTypeId  google maps MapTypeId ROADMAP            var map   new google maps Map document getElementById  map            mapOptions    var marker   new google maps Marker       position  new google maps LatLng 52 640143 1 28685       map  map      title   Mark On Map            google maps event addDomListener window   load   initialize    lt  script gt    lt  head gt    Please could somebody assist me to alter my code so that it enables the Google Maps API to request an Address in its place because I want to read the Address of the user directly from mySQL database

User · Answer

Geocoding is the process of converting addresses  like  1600 Amphitheatre Parkway  Mountain View  CA   into geographic coordinates  like latitude 37 423021 and longitude -122 083739   which you can use to place markers or position the map    Would this be what you are looking for  Contains sample code https   developers google com maps documentation javascript geocoding GeocodingRequests

User · Answer

Thought I d share this code snippet that I ve used before  this adds multiple addresses via Geocode and adds these addresses as Markers      x000D   x000D  var addressesArray     x000D     Address Str No  Postal Area city   x000D      follow this structure x000D    x000D  var map   new google maps Map document getElementById  map      x000D    center    x000D      lat  12 7826  x000D      lng  105 0282 x000D       x000D    zoom  6  x000D    gestureHandling   cooperative  x000D      x000D  var geocoder   new google maps Geocoder    x000D  for  i   0  i  lt  addressArray length  i      x000D    var address   addressArray i   x000D    geocoder geocode   x000D       address   address x000D       function results  status    x000D      if  status      OK     x000D        var marker   new google maps Marker   x000D          map  map  x000D          position  results 0  geometry location  x000D          center    x000D            lat  12 7826  x000D            lng  105 0282 x000D             x000D            x000D        else   x000D        alert  Geocode was not successful for the following reason      status   x000D        x000D        x000D    x000D   x000D   x000D

User · Answer

See this example  initializes the map to  quot San Diego  CA quot   Uses the Google Maps Javascript API v3 Geocoder to translate the address into coordinates that can be displayed on the map   lt html gt   lt head gt   lt meta name  quot viewport quot  content  quot initial-scale 1 0  user-scalable no quot   gt   lt meta http-equiv  quot content-type quot  content  quot text html  charset UTF-8 quot   gt   lt title gt Google Maps JavaScript API v3 Example  Geocoding Simple lt  title gt   lt script type  quot text javascript quot  src  quot http   maps google com maps api js sensor false quot  gt  lt  script gt   lt script type  quot text javascript quot  gt    var geocoder    var map    var address   quot San Diego  CA quot     function initialize         geocoder   new google maps Geocoder        var latlng   new google maps LatLng -34 397  150 644       var myOptions           zoom  8        center  latlng      mapTypeControl  true      mapTypeControlOptions   style  google maps MapTypeControlStyle DROPDOWN MENU       navigationControl  true        mapTypeId  google maps MapTypeId ROADMAP            map   new google maps Map document getElementById  quot map canvas quot    myOptions       if  geocoder          geocoder geocode     address   address   function results  status            if  status    google maps GeocoderStatus OK              if  status    google maps GeocoderStatus ZERO RESULTS              map setCenter results 0  geometry location                var infowindow   new google maps InfoWindow                    content    lt b gt   address   lt  b gt                      size  new google maps Size 150 50                                       var marker   new google maps Marker                   position  results 0  geometry location                  map  map                   title address                              google maps event addListener marker   click   function                     infowindow open map marker                                else               alert  quot No results found quot                          else             alert  quot Geocode was not successful for the following reason   quot    status                                  lt  script gt   lt  head gt   lt body style  quot margin 0px  padding 0px  quot  onload  quot initialize   quot  gt    lt div id  quot map canvas quot  style  quot width 100   height 100  quot  gt   lt  body gt   lt  html gt   working code snippet   x000D   x000D  var geocoder  var map  var address    San Diego  CA    function initialize       geocoder   new google maps Geocoder      var latlng   new google maps LatLng -34 397  150 644     var myOptions         zoom  8      center  latlng      mapTypeControl  true      mapTypeControlOptions          style  google maps MapTypeControlStyle DROPDOWN MENU            navigationControl  true      mapTypeId  google maps MapTypeId ROADMAP        map   new google maps Map document getElementById  map canvas    myOptions     if  geocoder        geocoder geocode          address   address        function results  status          if  status    google maps GeocoderStatus OK            if  status    google maps GeocoderStatus ZERO RESULTS              map setCenter results 0  geometry location              var infowindow   new google maps InfoWindow               content    lt b gt     address     lt  b gt                size  new google maps Size 150  50                           var marker   new google maps Marker               position  results 0  geometry location              map  map              title  address                         google maps event addListener marker   click   function                 infowindow open map  marker                            else             alert  No results found                      else           alert  Geocode was not successful for the following reason      status                         google maps event addDomListener window   load   initialize   x000D  html  body   map canvas     height  100     width  100     x000D   lt script type  text javascript  src  https   maps google com maps api js key AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk  gt  lt  script gt   lt div id  map canvas   gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can parse the geolocation through the addresses  Create an Array with jquery like this     follow this structure var addressesArray        Address Str No  Postal Area city       loop all the addresses and call a marker for each one for  var x   0  x  lt  addressesArray length  x          getJSON  http   maps googleapis com maps api geocode json address   addressesArray x    amp sensor false   null  function  data        var p   data results 0  geometry location     var latlng   new google maps LatLng p lat  p lng         it will place marker based on the addresses  which they will be translated as geolocations      var aMarker  new google maps Marker         position  latlng        map  map                   Also please note that Google limit your results if you don t have a business account with them  and you my get an error if you use too many addresses

User · Answer

var geocoder  var map  function initialize     geocoder   new google maps Geocoder    var latlng   new google maps LatLng -34 397  150 644   var mapOptions       zoom  8    center  latlng   map   new google maps Map document getElementById  map    mapOptions      function codeAddress     var address   document getElementById  address   value  geocoder geocode     address   address   function results  status      if  status     OK         map setCenter results 0  geometry location       var marker   new google maps Marker           map  map          position  results 0  geometry location             else       alert  Geocode was not successful for the following reason      status               lt body onload  initialize    gt    lt div id  map  style  width  320px  height  480px   gt  lt  div gt    lt div gt      lt input id  address  type  textbox  value  Sydney  NSW  gt      lt input type  button  value  Encode  onclick  codeAddress    gt    lt  div gt   lt  body gt    Or refer to the documentation https   developers google com maps documentation javascript geocoding

[javascript] Using Address Instead Of Longitude And Latitude With Google Maps API

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to latitude-longitude

Examples related to street-address