logo-adfdev

Can you support me?

bitcoin-address31zGc291awvX5rw3JZsiG8RY6EaBgmCL67

bitcoin-address0xaF8b831e4E47bEcF8e762fD247661ef5392eC7b8

geomapify | Ultimate library for google maps autocomplete

example - Simple usage


HTML:

    
      
        <!--autocomplete field-->
        <input type="text" id="autocompleteGoogleMaps" autocomplete="off">
        <!--container all inputs fields-->
        <div id="containerInputsGoogleMaps">
          <label>Street number</label>
          <input type="text" google-maps-field="street_number" autocomplete="off" readonly>
          <!--canvas for map-->
          <div id="mapCanvasGoogleMaps"></div>
        </div>
      
    
  

JAVASCRIPT:

    
      
        /*script*/
        $('#autocompleteGoogleMaps').geomapify({
          apiKey: '###-myAPIGoogleMapsKey-###'
        })
      
    
  

Basic Usage


1 - Include js script on your document

    
      
        <script src="../geomapify.min.js"></script>
      
    
  

2 - Init geomapify on autocomplete element

    
      $('#autocompleteGoogleMaps').geomapify({
        apiKey: '###-myAPIGoogleMapsKey-###'
      }
    
  

Dependency


Recommendations


Options explaned


There are options you can set!

    
      $('#autocompleteGoogleMaps').geomapify({
        apiKey: '###-myAPIGoogleMapsKey-###',
        containerInputs: '#containerInputsGoogleMaps',
        mapCanvas: '#mapCanvasGoogleMaps',
        startPosition: null,
        markerOnStartPosition: false,
        filledFieldsOnStartPosition: false,
        fieldAttr: 'google-maps-field',
        draggable: true,
        createJSON: true,
        editFieldsAfterFilled: false,
        editJSONonManualInput: false,
        autocompleteOnEmptyCleanFields: false,
        canvas: {
          zoom: 16,
          gestureHandling: 'cooperative'
        },
        callbacks: {
          filledFields : function (){

          },
          markerDragged : function (){

          },
          createJSON : function (){

          },
          googleMapsScriptLoaded : function (){

          }
        },
        componentForm: {
          street_number: 'short_name',
          route: 'long_name',
          locality: 'long_name',
          administrative_area_level_1: 'long_name',
          administrative_area_level_2: 'short_name',
          country: 'long_name',
          postal_code: 'short_name'
        },
        jsonNamesKeys: {
          administrative_area_level_1: 'region',
          locality: 'city',
          administrative_area_level_2: 'state'
        }
      });
    
  
Option Type Description Default
apiKey varchar This is your key for Google Maps API services. You can obtain one of this at this link. null
containerInputs element You must specify html element contains all autocomplete fields for population and canvas for map. #containerInputsGoogleMaps
mapCanvas element You must specify html element work like canvas for showing map. #mapCanvasGoogleMaps
startPosition 'latitude, longitude' If you want show map before you make a search. Sintax is: 'latitude, longitude' null
markerOnStartPosition true|false When you are showing the map with startPosition, you can decide if you want a marker on map. false
filledFieldsOnStartPosition true|false When you are showing the map with startPosition, you can decide if you want fill fields. false
fieldAttr varchar Choice your custom name for attribute, for each input field. google-maps-field
draggable true|false If you want disable drag of marker on map. true
createJSON true|false If you want disable creation of JSON. true
hideMap true|false If you want disable map canvas. true
editFieldsAfterFilled true|false If you want edit fields after search. false
editJSONonManualInput true|false If you have set editFieldsAfterFilled = true, you can update JSON data with manual custom edit inputs values. false
autocompleteOnEmptyCleanFields true|false When you completely clear the autocomplete input field, all fields will be reset. false
canvas array If you want modify canvas google maps settings, you can put settings by Google API document. false
callbacks.filledFields function Can you execute tour callback after filled all fields. empty
callbacks.markerDragged function Can you execute tour callback after you have dragged marker on map. empty
callbacks.createJSON function Can you execute tour callback after creation of JSON. empty
callbacks.googleMapsScriptLoaded function Can you execute tour callback after Google Maps API script is loaded. empty
componentForm array Can you set your prefered field of search, by official Google documentation. commons params
jsonNamesKeys array Can you set your prefered name of keys for JSON data. empty

Q&A


1 - Why I have error with HTTP protocol?

[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

You need install in your domain SSL Certificate for HTTPS connection.