Javascript google maps api enter address show locations

Question

My application currently finds the nearest ski areas, based on the latitude and longitude that is hardcoded in. I would like to be able to type in an address and convert that address into the latitude and longitude for the search. I am using Google Maps api and the places library. I know that I somehow need to use geocoding but not sure how to do that. Here is the code:

 <!DOCTYPE html>
    <html>
  <head>
    <meta charset="utf-8">
    <title>ski finder</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

    <style>
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>

    <script>
      var map;
      var infowindow;

      function initialize() {
        var loca = new google.maps.LatLng(41.7475, -74.0872);

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: loca,
          zoom: 8
        });

        var request = {
          location: loca,
          radius: 50000,
          name: 'ski',
          keyword: 'mountain',
          type: ['park']


        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
      </head>
      <body>
        <h1> Welcome to Ski Finder </h1>
        <p> Please enter you location below, and we will find your local ski areas. </p>
        <form>
        <label for="zip">Zip Code: </label>
        <input type = "text" name="zip" placeholder = "12345" autofocus>
    </form>
        <div id="map"></div>
        <div id="text">

      </body>
    </html>

Also I tried using the example on the google maps developer page and could not get it to work. Thanks in advanced.

Look at the Geocoding API, there are probably code examples too. — Halcyon
– Halcyon, Commented Apr 17, 2013 at 15:28
possible duplicate of trying to get location from address using google api v3 — duncan
– duncan, Commented Apr 17, 2013 at 15:41

geocodezip · Accepted Answer · 2015-07-28 14:20:43Z

Use the geocoder to set the location passed in to the places search:

working example

code snippet:

var geocoder;
var map;
var infowindow;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var loca = new google.maps.LatLng(41.7475, -74.0872);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: loca,
    zoom: 8
  });

}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      var request = {
        location: results[0].geometry.location,
        radius: 50000,
        name: 'ski',
        keyword: 'mountain',
        type: ['park']
      };
      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 400px;
  width: 600px;
  border: 1px solid #333;
  margin-top: 0.6em;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<title>ski finder</title>

<h1> Welcome to Ski Finder </h1>
<p>Please enter you location below, and we will find your local ski areas.</p>
<form>
  <label for="zip">Zip Code:</label>
  <input type="text" id="address" placeholder="12345" autofocus></input>
  <input type="button" value="Submit" onclick="codeAddress();"></input>
</form>
<div id="map"></div>
<div id="text">

Ganesha · Accepted Answer · 2014-02-21 06:55:50Z

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PC Pro - Google Maps Advanced Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript">
        var map = null;
        $(document).ready(function () {
            // Set values for latitude and longitude
            var latitude = parseFloat("51.515252");
            var longitude = parseFloat("-0.189852");
            // Setup the Google map
            loadMap(latitude, longitude);
            // Add the marker
            setupMarker(latitude, longitude);
            // Setup the address lookup on the button click event
            $('#lookup').click(function() {
                var address = $('#address').val();
                var geocoder = new google.maps.Geocoder();          
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        // Show the new position on the map
                        setupMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng())
                    }
                    else alert("Unable to get a result, reason: " + status);
                });
            });
        });
        // Loads the maps
        loadMap = function (latitude, longitude) {
            var latlng = new google.maps.LatLng(latitude, longitude);
            var myOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
        }
        // Setups a marker and info window on the map at the latitude and longitude specified
        setupMarker = function(latitude, longitude) {
            // Generate the position from the given latitude and longitude values
            var pos = new google.maps.LatLng(latitude, longitude);
            // Define the marker on the map in the specified location
            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: name
            });
            // Add a listener to this marker to display the information window on click
            var info = "This is a marker for the following co-ordinates:<br />latitude: " + latitude + "<br/>longitude: " + longitude;
            google.maps.event.addListener(marker, 'click', function () {
                var infowindow = new google.maps.InfoWindow({
                    content: info
                });
                infowindow.open(map, marker);
            });
        }
</script>
</head>
<body>
<label for="address">Address:</label>
<input id="address" type="text" style="width:540px" />
<input id="lookup" type="button" value="Lookup" />
<div id="map" style="width:600px;height:600px;margin-top:10px;"></div>
</body>
</html>

Displaying the google-map by taking the Address,Zip code as input.

Collectives™ on Stack Overflow

Javascript google maps api enter address show locations

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related