Question

85

Using Address Instead Of Longitude And Latitude With Google Maps API

rated 0 times [ 91] [ 6] / answers: 1 / hits: 160497 / 11 Years ago, wed, april 10, 2013, 12:00:00

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:

<head>

    <meta http-equiv=Content-Type content=text/html; charset=UTF-8/>

<link rel=stylesheet type=text/css href=css.css />

    <title>Login Page</title>



<meta name=viewport content=initial-scale=1.0, user-scalable=no />

<style type=text/css>

  html { height: 100% }

  body { height: 100%; margin: 0; padding: 0 }

  #map-canvas { height: 100% }

</style>

<script type=text/javascript

  src=https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false>

</script>

<script type=text/javascript>

  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);

</script>



</head>

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elijahm

Add To Favorites

Follow

Total Points: 674

Total Questions: 124

Total Answers: 79

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

elijahm questions

1 No routes matched location / react router v6

Thu, Dec 9, 21, 00:00, 3 Years ago

1 Conditional styling on class in Svelte

Mon, Aug 9, 21, 00:00, 3 Years ago

1 Angular: PDF in an iframe wont show if too big

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How to make a drop-down menu appear exactly below the bar in Material-UI?

Thu, Jul 9, 20, 00:00, 4 Years ago

1 Extending HTML < a> tag elements in React and TypeScript

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 11 Years ago annaw · Accepted Answer

See this example, initializes the map to "San Diego, CA".

Uses the Google Maps Javascript API v3 Geocoder to translate the address into coordinates that can be displayed on the map.

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

  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: '<b>'+address+'</b>',

                  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);

        }

      });

    }

  }

</script>

</head>

<body style="margin:0px; padding:0px;" onload="initialize()">

 <div id="map_canvas" style="width:100%; height:100%">

</body>

</html>

working code snippet:

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: '<b>' + address + '</b>',

            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);

html,

body,

#map_canvas {

  height: 100%;

  width: 100%;

}

<script type=text/javascript src=https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id=map_canvas ></div>