Tips for revealing the pin after entering it into the text box

Is there a way to display the address inputted into 4 textboxes (with pin changing after onchange) on a Google map embedded on my website? I want to have 4 separate input fields for zip code, city, street, and house number. If all four boxes are filled out with more than 4 letters each, then the full address should be displayed on the map.

I attempted to use the demo code provided on the download page.

$(function(){

$('#test').gmap3({
      map:{
        options:{
          center:[46.721976,14.180603],
          zoom:8,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          mapTypeControlOptions: false,
          navigationControl: false,
          scrollwheel: false,
          streetViewControl: false
        }
      }
    });


    $('#test-address').keydown(function(e){
      var addr = $('#test-address').val();
      if ( !addr || !addr.length ) return;
      $("#test").gmap3({
        getlatlng:{
          address:  addr,
          callback: function(results){
            if ( !results ) return;
            $(this).gmap3({
              marker:{
                latLng:results[0].geometry.location,
                map:{
                  center: true
                }
              }
            });
          }
        }
      });
    });

  });

However, I would like to achieve this functionality using information from four input boxes combined.

Any suggestions on how I can accomplish this?

Answer №1

Within the realm of HTML coding, I have integrated both an Input Box and a Gmap Div.

Located in the demo folder, there is a requirement for a compilation of four input boxes (zip code, city, street, house number) instead of one singular input box. The demo script seamlessly adds pins without deleting the previous input provided, even when altering the address.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The code functions properly when tested on a local server, but doesn't produce any results when

Currently, I am working on customizing a premade website and have been tasked with making a modification. The goal is to implement a confirmation box that appears when a button to delete a meeting task is clicked, rather than immediately deleting it. Afte ...

Delaying the call of a JavaScript function with jQuery

Basic JavaScript Function: $(document).ready(function(){ function sampleFunction() { alert("This is a sample function"); } $("#button").click(function(){ t = setTimeout("sampleFunction()",2000); }); }); HTML ...

Tips for accessing id from $http.get in angular.js

Hello everyone, I'm new to Angular.js and currently learning it. I need help in retrieving data from the following API URL: . I am unsure how to implement this in my controller.js file. Below is the code I have so far, can someone please guide me on h ...

height detection is not functioning

Here is a straightforward script that I'm using: var element = document.getElementById("container"); if (element.clientHeight == "372") { element.style.height = "328px"; element.style.marginBottom = "44px"; } else { element.style.height = "21 ...

Please ensure that all fields in the form are filled out before clicking the enable button

Is it possible to enable the button only when all fields are filled out in a form? It's easy if there's just one field, but I have multiple fields with a select field as well. I'm not sure how to do this. Here's the form I've creat ...

Conflict between jquery and hoverIntent libraries

I've encountered an issue with a website that was functioning properly until we added a new form to a specific page. The form, created by another person, utilizes javascript/jQuery for processing. Since adding this form, it has caused the majority of ...

Display loading spinners for multiple ajax requests

At the moment, I am displaying spinners using the ajax setup method call: (function() { $.ajaxSetup({ beforeSend: showLoader, complete: hideLoader, error: hideLoader }); })(); While this setup is functioning properly, the ...

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

Exploring the Google Maps API Search feature

I am currently developing a JavaScript application that interfaces with the Google Maps API. The program has the following requirements: Enable users to input a location. Upon clicking the "find" button, convert the user's entered location into long ...

Recently added classes are not exhibiting the same behavior as the ones loaded during DOM ready

I have implemented a jQuery plugin called timeago.js to display the time a particular article was posted, for example, showing 2 minutes ago. HTML: <p> Articles <span class='post-time' title='2014-12-03 13:42'></span> ...

Combining and mapping arrays in Javascript to form a single object

I am using the following firebase function this.sensorService.getTest() .snapshotChanges() .pipe( map(actions => actions.map(a => ({ [a.payload.key]: a.payload.val() }))) ).subscribe(sensors => { ...

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

We have successfully implemented the LinkedIn login API to generate authorization code and obtain access tokens through the browser. https://i.sstatic.net/0dfxd.png Click here for image description However, we are looking to transition this functionality ...

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

What could be causing my jQuery script to malfunction?

After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point ...

Conditional radio button disabling in Material-ui

Currently, I am developing a React application using material-ui. My goal is to disable all radio buttons within a RadioGroup when a specific event occurs, and then re-enable them once the event is no longer active. For example, when a button is clicked, ...

Trouble with Vue 3 watch not persisting after page refresh

Attempting to create a Vue application that supports two languages, utilizing local storage and store to store the selected language. Initially, everything appears to be functioning correctly. After the user logs in, the default language is displayed in b ...

Managing an iframes website using buttons and links: Tips and tricks

I am trying to create a website that includes an iframe for navigating through external websites using previous and next buttons. I also want to display the links on a sidebar so that users can click on them to automatically load the site in the iframe. I ...

Storing user input in MongoDB after encoding

I am currently exploring the most effective methods for storing and presenting user input in MongoDB. In traditional SQL databases, it is necessary to encode all user input as a precaution against injection attacks. However, in the context of MongoDB, ther ...

How can I leverage Express, AngularJS, and Socket.io to facilitate broadcasting and receiving notifications?

A new notification system is in the works. To illustrate, User 1 is initiating a friend request to User 2. The technologies being utilized include express.js, angularjs, and socket.io. When User1 clicks the button, a request is sent. On User2's end, a ...