Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Google maps autocomplete, dragging issue

    i have a small problem with the Google Maps Api. I am using the dragging and autocomplete option.

    Everything is working fine excpect the following small bug.

    When i am first clicking in the address field and after that i dragging the marker to some place the address appear correctly but when i click some where else on the page afterwards the address field lose his focus and the value from before dragging is back.

    If i am dragging without clicking in the address field before the value is saved.

    So has anyone a idea how to fix this bug.

    It seems that the autocomplete script from google do not get the new value.

    Here you find the example: http://jsfiddle.net/Borsti26/4euhW/3/

    Thanks.

    BR

    Code:
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
     var geocoder = new google.maps.Geocoder();       
    
                function geocodePosition(pos) {
                    geocoder.geocode({
                        latLng: pos
                    }, function(responses) {
                        if (responses && responses.length > 0) {
                            updateMarkerAddress(responses[0].formatted_address.replace(", Deutschland","").split(", ").splice(-1,1));
                        } else {
                            updateMarkerAddress('Keine Koordinaten gefunden!');
                        }
                    });
                }
    
    
                function updateMarkerPosition(latLng) {
                    document.getElementById('info').value = [
                        latLng.lat(),
                        latLng.lng()
                    ].join(', ');
                }
    
                function updateMarkerAddress(str) {
                    document.getElementById('searchTextField').value = str;
                }
    
                function initialize() {
                    var latLng = new google.maps.LatLng(51.52868697804051, 9.916303581237798);
                    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                        zoom: 6,
                        center: latLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        streetViewControl: false,
                        mapTypeControl: false
    
                    });
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        draggable: true,
                        title:"Sie können mich per Drag & Drop auf das gewünschte Ziel setzen. Oder im Suche feld den Ort eingeben und auswählen."
                    });
    
                    var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input);
    
            autocomplete.bindTo('bounds', map);
    
                    // Update current position info.
                    updateMarkerPosition(latLng);
                    //geocodePosition(latLng);
    
                    // Add dragging event listeners.
                    google.maps.event.addListener(marker, 'dragstart', function() {
                        updateMarkerAddress('Dragging...');
                    });
    
                    google.maps.event.addListener(marker, 'drag', function() {
                        updateMarkerPosition(marker.getPosition());
                    });
    
                    google.maps.event.addListener(marker, 'dragend', function() {
                        geocodePosition(marker.getPosition());
                    });
    
                    google.maps.event.addListener(autocomplete, 'place_changed', function() {
                        input.className = '';
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                // Inform the user that the place was not found and return.
                input.className = 'notfound';
                return;
              }
    
              // If the place has a geometry, then present it on a map.
              if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
              } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
              }
                marker.setPosition(place.geometry.location);
    updateMarkerPosition(marker.getPosition());
    //geocodePosition(marker.getPosition());
    
            });
                }
    
                // Onload handler to fire off the app.
                google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
      <style>
      body{
      font-family: arial;
      font-size: 13px;
      }
      #mapCanvas {
        width: 600px;
        height: 500px;
        float: left;
      }
      #infoPanel {
        float: left;
        margin-left: 10px;
      }
      #infoPanel div {
        margin-bottom: 5px;
      }
       </style>
    
      <div id="mapCanvas"></div>
      <div id="infoPanel">
    
        <b>Current position:</b>
        <input id="info" type="text" size="50" value="">
        <b>Closest matching address:</b>
        <input id="searchTextField" type="text" size="37">
    
      </div>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,911
    Thanks
    56
    Thanked 544 Times in 541 Posts
    it's a bit of a nasty little workaround, but adding:
    Code:
    document.getElementById("searchTextField").focus();
    document.getElementById("searchTextField").blur();
    to your marker 'dragend' function fixes the problem you describe. I don't know what it does to the rest of your code, though

  • Users who have thanked xelawho for this post:

    Borsti26 (06-11-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks.
    That was what i am looking for.
    Now it is working.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •