leaflet geosearch - search for location from outside of leaflet map container

Question

I would like to be able to have my map centered at a pre-entered location. For example:

Page 1: user submits a location and gets redirect to page 2

Page 2: takes input from page 1 and centers map based off of the location

Assuming input from page 1 is saved into variable 'location', I've tried:

<script src="/static/js/leaflet.js" type="text/javascript"></script>
<script src="/static/js/l.control.geosearch.js" type="text/javascript"></script>
<script src="/static/js/l.geosearch.provider.google.js" type="text/javascript"></script>
<script type="text/javascript">
    var googleGeocodeProvider = new L.GeoSearch.Provider.Google();
    var map = L.map('map', {center: [30.27, -97.75], zoom: 10, maxZoom: 18, minZoom: 3});
    L.tileLayer(''http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);
    var geosearch = new L.Control.GeoSearch({
        provider: googleGeocodeProvider
    }).addTo(map);
    googleGeocodeProvider.GetLocations(location, function (data) {
        console.log(data);  # according to docs (https://github.com/smeijer/L.GeoSearch), data should have the x,y info I'm looking for
    });

The above code returns the error:

Uncaught TypeError: Cannot read property 'geocode' of      undefinedL.GeoSearch.Provider.Google.L.Class.extend.GetLocations @  l.geosearch.provider.google.js:39(anonymous function) @ (index):357

Edit:

Sorry Ghybs, I should have been more clear about the issue that I had. I am using django to service web requests and I'm able to pass variables between pages easily. The issue was that I was not able to call geosearch outside of the leaflet map with a given query and have it return the coordinates I need to re-center the map.

score 0 · Answer 1 · edited May 23 '17 at 12:23

Unfortunately you cannot pass the value of JavaScript variables from one page to another as simply. You need to use a "persistent" storage, that the next page can read and take action on (like setting the view to a previously user-supplied position and zoom, as you require).

2 simple ways of doing so are:

With the browser location bar, usually using the hash/fragment part. See plugin Leaflet.RestoreView.
With the browser HTML5 localStotarge. See plugin Leaflet-hash.

You can also try other Leaflet plugins.

You could also try to implement your own version of method 1, so that you pass the "location" directly as a string that your geocode provider object can manage, rather than coordinates (as is done with the 2nd plugin for example). It could be written either in the hash or the query part. There are numerous small JavaScript libraries that could help you with that.

The nice advantage of method 1 is that you can actually use the link as a permalink to your 2nd page that points directly to the correct location!

EDIT:

For retrieving the hash part of the URL in your location bar (method 1), see that post.

Since you tagged jQuery, you could use it to store / retrieve data in localStorage (method 2).

score 0 · Accepted Answer · answered Oct 30 '15 at 19:50

I resolved the error that I got by customizing the l.geosearch.provider.google.js script, replace:

var geocoder = L.GeoSearch.Provider.Google.Geocoder;

with:

var geocoder;
if (L.GeoSearch.Provider.Google.Geocoder)
    geocoder = L.GeoSearch.Provider.Google.Geocoder;
else
    geocoder = new google.maps.Geocoder();

If someone has a better solution, please let me know! (such as somehow calling the geosearch function within the map object)

leaflet geosearch - search for location from outside of leaflet map container

2 Answers2