cant get geocoder working with a textbox google maps api

Question

I've looked all over this site but couldnt find a clear cut answer. First of all i'm a javascript noob.

I'm trying to setup a google maps where it gets it input from a textbox and then outputs the Lat/Long in a two different textboxes. .

There are 3 things I want to do.

Use a textbox(named izipcode) as input for geocoding when I click on a button that says "Geocode.
When i drag the marker to a new location, the textboxes have to be updated with the new Lat/Long. As of right now I can get the lat/long in a the right boxes but cant get them to update once i move the marker.
I want to use only one marker, now when i click it just keeps making new markers. By the way my company is using Apache Wicket and thats why i have a seperate JS File.

This is my HTML.

<wicket:extend>
    <div class="message_err" wicket:id="feedback">[feedback panel]</div>
    <div class="title" wicket:id="merchantstore.title"/>
    <form style="margin-top: 1em;" wicket:id="form">
        <fieldset>
            <table>
            <thead></thead>
                <tbody>

                     <tr>
                        <td><label for="iname"><wicket:message key="label.merchantstore.address">Address</wicket:message> <em>*</em></label></td>
                        <td><input id="iname" type="text" class="text" wicket:id="merchantstore.address" /></td>
                    </tr>

                    <tr>
                        <td><label for="icountry"><wicket:message key="label.merchantstore.countrycode">Country</wicket:message> <em>*</em></label></td>
                        <td><input id="icountry" type="text" class="text" wicket:id="merchantstore.countrycode" /></td>
                    </tr>
                      <tr>
                        <td><label for="icity"><wicket:message key="label.merchantstore.city">City</wicket:message> <em>*</em></label></td>
                        <td><input id="icity" type="text" class="text" wicket:id="merchantstore.city" /></td>
                    </tr>
                    <

                    <tr>
                        <td><label for="izipcode"><wicket:message key="label.merchantstore.zipcode">Zip code</wicket:message> <em>*</em></label></td>
                        <td><input id="izipcode" type="text" class="text" wicket:id="merchantstore.zipcode" value="" /></td>

                       <td><input type="button" class="geocode" onclick="codeAddress()" wicket:message="value:button.geocode" /></td></tr>

                      <tr>
                        <td><label for="ilatitude"><wicket:message key="label.merchantstore.latitude">Latitude</wicket:message></label></td>
                        <td><input id="ilatitude" type="text" class="text" wicket:id="merchantstore.latitude" /></td>
                    </tr>  
                <tr>
                        <td><label for="ilongitude"><wicket:message key="label.merchantstore.longitude">Longitude</wicket:message></label></td>
                        <td><input id="ilongitude" type="text" class="text" wicket:id="merchantstore.longitude" /></td>
                    </tr>



                    <td><div id="gmap" style="width: 512px; height:512px; margin-left: auto; margin-right: auto; margin-top: 50px;"></div></td>                     
                </tbody>
            </table>

        </fieldset>
        <p>
            <input type="submit" class="submit fixedbutton" wicket:message="value:button.save"/>
            <input type="button" class="fixedbutton" wicket:message="value:button.cancel" wicket:id="actionCancel" />
        </p>
    </form>



</wicket:extend>

This is my JS file.

function contactMap() {

    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        zoom: 1,
        minZoom: 1,
        center: myLatlng,
        disableDefaultUI: false,
        navigationControl: false,
        mapTypeControl: false,
        scrollwheel: true,

        // styles: styles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var geocoder

    geocoder = new google.maps.Geocoder();      
    function codeAddress(){
                var Address=document.getElementById("izipcode").value;
                geocoder.geocode({ 'izipcode': address }, function(results, status){if (status == google.maps.GeocoderStatus.OK){
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                    map: map,
                    draggable:true,
                    position: results[0].geometry.location  });         

                }
                else
                    {
                    alert("Geocode is niet gelukt" + status);
                    };
                }) 
            }

    var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
    google.maps.event.trigger(map, 'resize');
    map.setZoom( map.getZoom() );


    google.maps.event.addListener(map, "click", function(event) {
        // get lat/lon of click
        var clickLat = event.latLng.lat();
        var clickLon = event.latLng.lng();

        // show in input box 
        document.getElementById("ilatitude").value = clickLat.toFixed(15);
        document.getElementById("ilongitude").value = clickLon.toFixed(15);

          var marker = new google.maps.Marker({
                position: new google.maps.LatLng(clickLat,clickLon),
                map: map,
                draggable: true,
             });
    });

    // keep googlemap responsive - center on resize
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(myLatlng);
    });

};

function showMap(initWhat) {
    var script      = document.createElement('script');
    script.type     = 'text/javascript';
    script.src      = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback='+initWhat;
    document.body.appendChild(script);
}
    $( document ).ready(function() {

        // INIT CONTACT, NLY IF #contactMap EXISRS
        if(jQuery("#gmap").length > 0) {
            showMap('contactMap');
        }

});

What problems are you having? What is working? What isn't? – geocodezip Apr 16 '15 at 14:23 — geocodezip, Apr 16 '15 at 14:23

score 1 · Answer 1 · answered Apr 16 '15 at 18:34

It seems like there are several problems...

the first thing i changed is the marker, instead of making a new one every time, you should update its position if the marker exist already. You might want to clear the address out, or update to the new address, or just leave it as is, it is your call.
http://jsfiddle.net/s9e7uj3p/
line 53-62:

    if (marker==null){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(clickLat,clickLon),
            map: map,
            draggable: true,
         });
    } else {
        var myLatlng = new google.maps.LatLng(clickLat,clickLon);
        marker.setPosition(myLatlng);
    }

Then, it is because of the scope, your button has no access to your codeAddress function. You should either move it out or assign it to an reference outside of your contactMap function.

codeAddress = function codeAddress(){
            var Address=document.getElemen......
            ......

And according to the documentation, you should pass an object which has a field called address. So no matter how you call your izipcode, you still pass the string address.
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

            geocoder.geocode({ 'address': Address }, function(results, status){
                if (status == go......

As it is said before, you wants to update, rather then create a new marker if it exist. Same apply to when geocode call you back. Also you should update your Lat Lng text boxes too.

So your code should look something like this:

http://jsfiddle.net/s9e7uj3p/1/

finally you should also add a listener for when it is drag.

http://jsfiddle.net/s9e7uj3p/2/

cant get geocoder working with a textbox google maps api

1 Answers1