geoplaces.co

Quick Start

Address Autocomplete

Adding Address Autocomplete to any webpage is easy!

 // Add the Search Box DIV within your HTML code


<div id="search-box"></div>


<script type="text/javascript">
        // Initialize an empty map without layers (invisible map)
        var map = L.map('map', {
        });

        //Initialize the geocoder
        var geocoderControl = new L.control.geocoder('[YOUR_API_KEY]',
        	geocoderControlOptions).addTo(map).on('select', function (e) {     
        });

        //Get the "search-box" div
        var searchBoxControl = document.getElementById("search-box");
        //Get the geocoder container from the leaflet map
        var geocoderContainer = geocoderControl.getContainer();
        //Append the geocoder container to the "search-box" div
        searchBoxControl.appendChild(geocoderContainer);        

</script>

// Add the Search Box DIV within your HTML code

// Initialize an empty map without layers (invisible map)

var map = L.map('map', {

});

//Initialize the geocoder

var geocoderControl = new L.control.geocoder('[YOUR_API_KEY]',

geocoderControlOptions).addTo(map).on('select', function (e) {

});

//Get the "search-box" div

var searchBoxControl = document.getElementById("search-box");

//Get the geocoder container from the leaflet map

var geocoderContainer = geocoderControl.getContainer();

//Append the geocoder container to the "search-box" div

searchBoxControl.appendChild(geocoderContainer);

</script>

Fill Form

Automatically fill out form details based on the Address Autocomplete results.

Billing Address

<form action="/billing" class="form">


<div id="search-box-form"></div>



<div class="col-md-6">
						<label class="control-label">Street address</label>
						<input class="form-control" id="street_number" disabled="true">
</div>



<div class="col-md-6">
						<label class="control-label">City</label>
						<input class="form-control field" id="city" disabled="true">
</div>



<div class="col-md-6"> 
						<label class="control-label">State</label>
						<input class="form-control" id="state" disabled="true">
</div>



<div class="col-md-6">
						<label class="control-label">Zip code</label>
						<input class="form-control" id="postal_code" disabled="true">
</div>


</form>

<label class="control-label">Street address</label>

</div>

</div>

<label class="control-label">State</label>

</div>

</div>

</form>

Map Display

View a map with the results from the Address Autocomplete.

<style type="text/css">
        body {
            margin: 0;
        }
        #map {
            width: 550px;
            height: 550px;
        }
    </style>


<div id="map"></div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
<script type="text/javascript" src="js/leaflet-geoplaces.js?v=1.29"></script>
 	 	 	 	 	 	 	 	 	 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 	 	 	 	 	 	 	 	 	 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
 	 	 	 	 	 	 	 	 	 	<link rel="stylesheet" href="https://geoplaces.co/maps/leaflet-geocoder-geoplaces.min.css">
<script src="https://geoplaces.co/maps/leaflet-geocoder-geoplaces.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/3.0.2/control/Permalink.js"></script>

<script type="text/javascript">
    // Maps access token goes here
    var key = '[YOUR_API_KEY]';

    // Add layers that we need to the map
    var streets = L.tileLayer.Geoplaces({key: key, scheme: "streets"});
    var earth = L.tileLayer.Geoplaces({key: key, scheme: "earth"});
    var hybrid = L.tileLayer.Geoplaces({key: key, scheme: "hybrid"});

    // Initialize the map
    var map = L.map('map', {
        center: [40.0904, -105.3856], // Map loads with this location as center
        zoom: 12,
        scrollWheelZoom: true,
        layers: [streets],
        zoomControl: false
    });

    L.control.zoom({
        position:'topright'
    }).addTo(map);

    // Add the 'layers' control
    L.control.layers({
        "Streets": streets,
        "Earth": earth,
        "Hybrid": hybrid,
    }, null, {
        position: "topright"
    }).addTo(map);

    // Add the 'scale' control
    L.control.scale().addTo(map);
    L.control.locate({
        position: "bottomright"
    }).addTo(map);

    L.control.geocoder(key, {
        // placeholder: 'Search nearby',
        url: "https://geoplaces.co/nom",
        expanded: true,
        panToPoint: true,
        focus: true,
        position: "topleft"
    }).addTo(map);

    map.addControl(new L.Control.Permalink({ useLocation: true, text: null }));

    (function(){
        var originalInitTile = L.GridLayer.prototype._initTile
        L.GridLayer.include({
            _initTile: function (tile) {
                originalInitTile.call(this, tile);
                var tileSize = this.getTileSize();
                tile.style.width = tileSize.x + 1 + 'px';
                tile.style.height = tileSize.y + 1 + 'px';
            }
        });
    })()

</script>

body {

margin: 0;

}

#map {

width: 550px;

height: 550px;

}

</style>

// Maps access token goes here

var key = '[YOUR_API_KEY]';

// Add layers that we need to the map

var streets = L.tileLayer.Geoplaces({key: key, scheme: "streets"});

var earth = L.tileLayer.Geoplaces({key: key, scheme: "earth"});

var hybrid = L.tileLayer.Geoplaces({key: key, scheme: "hybrid"});

// Initialize the map

var map = L.map('map', {

center: [40.0904, -105.3856], // Map loads with this location as center

zoom: 12,

scrollWheelZoom: true,

layers: [streets],

zoomControl: false

});

L.control.zoom({

position:'topright'

}).addTo(map);

// Add the 'layers' control

L.control.layers({

"Streets": streets,

"Earth": earth,

"Hybrid": hybrid,

}, null, {

position: "topright"

}).addTo(map);

// Add the 'scale' control

L.control.scale().addTo(map);

L.control.locate({

position: "bottomright"

}).addTo(map);

L.control.geocoder(key, {

// placeholder: 'Search nearby',

url: "https://geoplaces.co/nom",

expanded: true,

panToPoint: true,

focus: true,

position: "topleft"

}).addTo(map);

map.addControl(new L.Control.Permalink({ useLocation: true, text: null }));

(function(){

var originalInitTile = L.GridLayer.prototype._initTile

L.GridLayer.include({

_initTile: function (tile) {

originalInitTile.call(this, tile);

var tileSize = this.getTileSize();

tile.style.width = tileSize.x + 1 + 'px';

tile.style.height = tileSize.y + 1 + 'px';

}

});

})()

</script>