CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Nicola Ferioli
Nicola Ferioli

Reputation: 57

set marker without lat / lng in google maps

I created this marker and I'm trying to enter the location using the address. Like This: 

var myLatlng = "Castello d'Argile, VIA QUATTRO VIE 4";

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Example',
icon: 'icon.png'
});

Is it possible to add a marker only with the address?

Upvotes: 2

Views: 3806

Answers (2)

SphynxTech
SphynxTech

Reputation: 1849

You may use the geocoding service. You can consult the Google documentation but the code is very simple.

First, geocoding:

function geocodeAddress(the_address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': the_address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            return (results[0].geometry.location)


        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

In order to use this function you should call it with an address in the parameter (like your variable myLatlng).

Note the line: results[0].geometry.location is a bit complicated to explain. The array result can be a JSON or a XML format. There are different levels of precision and of type of address (like the position, the name of the city...). But, you just add to now that you can have the documentation here. I advise you to look care this paragraph.

You can have a simple example in the Google documentation.

This is my complete code:

<!DOCTYPE html>
<html>
<head>
<title>Geocoding service</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }
</style>
</head>
<body>
 <div id="floating-panel">
   <input id="address" type="textbox" value="Sydney, NSW">
   <input id="submit" type="button" value="Geocode">
 </div>
 <div id="map"></div>
 <script>
     function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 8,
       center: {lat: -34.397, lng: 150.644}
     });
     var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });
  }

  function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Note You have to replace YOU_API_KEY by a api key google.

Upvotes: 1

samanime
samanime

Reputation: 26617

Not directly, no.

You need use the Geocoding API to convert the address to a latitude/longitude, then use that to set your marker.

Upvotes: 1

Related Questions