CODEWITHSUNDEEP
javascriptgoogle-maps-api-3geocoding
Jmamz06
Jmamz06

Reputation: 109

Javascript google maps api enter address show locations

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.

Upvotes: 1

Views: 14709

Answers (2)

geocodezip
geocodezip

Reputation: 161324

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">

Upvotes: 2

Ganesha
Ganesha

Reputation: 340

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

Upvotes: 0

Related Questions