<p>Turns out my code was pretty much working but there was another issue in there that was stopping the map marker updating. I've since resolved it.
The original form is huge so here's a cut down snippet of the part that does the marker update in case anyone needs it. This cut-down version isn't tested but should be good.</p>

<p>Incidentally, the "parent element ID" to which I referred <em>is</em> the id of the entry in which your map resides.</p>

<p>Basic location update form (my entry is 'property')</p>

<pre><code>&lt;form id="property-edit__form" method="post" accept-charset="UTF-8" enctype="multipart/form-data"&gt;
    {{ getCsrfInput() }}    
    {% if property is defined %}
        &lt;input type="hidden" name="action" value="entries/saveEntry"&gt;
        &lt;input type="hidden" name="entryId" value="{{ property.id }}"&gt;
        &lt;input type="hidden" name="sectionId" value="{{ property.sectionId }}"&gt;
        &lt;input type="hidden" name="enabled" value="{{ property.enabled }}"&gt;
    {% else %}
        &lt;input type="hidden" name="action" value="entries/saveEntry"&gt;
        &lt;input type="hidden" name="sectionId" value="3"&gt;
        &lt;input type="hidden" name="enabled" value="0"&gt;
        &lt;input type="hidden" name="redirect" value="me/property/saved"&gt;
    {% endif %}

    &lt;div class="property-edit__map-fields"&gt;
        &lt;label&gt;
            Street Address
            &lt;input class="js-address-part" type="text" name="fields[location][street1]" value="{{property.location.street1 ?? ''}}"&gt;
        &lt;/label&gt;

        &lt;label&gt;
            City
            &lt;input class="js-address-part" type="text" name="fields[location][city]" value="{{property.location.city ?? ''}}"&gt;
        &lt;/label&gt;

        &lt;label&gt;
            County
            &lt;input class="js-address-part" type="text" name="fields[location][state]" value="{{property.location.state ?? ''}}"&gt;
        &lt;/label&gt;

        &lt;label&gt;
            Post Code
            &lt;input class="js-address-part" type="text" name="fields[location][zip]" value="{{property.location.zip ?? ''}}"&gt;
        &lt;/label&gt;

        &lt;label&gt;
            Country
            &lt;input class="js-address-part" type="text" name="fields[location][country]" value="{{property.location.country ?? ''}}"&gt;
        &lt;/label&gt;


        &lt;input class="js-address-lat" type="hidden" name="fields[location][lat]" value="{{property.location.lat ?? ''}}"&gt;

        &lt;input class="js-address-lng" type="hidden" name="fields[location][lng]" value="{{property.location.lng ?? ''}}"&gt;


        &lt;div&gt;&lt;button class="js-address-lookup"&gt;Lookup address&lt;/button&gt;&lt;/div&gt;

    &lt;/div&gt;


    &lt;div class="property-edit__map"&gt;
        {% if property is defined and property.location.hasCoords %}

            {% set options = {
                height: 300,
                width: '100%',
                zoom: 11,
                markerOptions: {
                    icon: '/images/map-marker.png'
                    },
                } 
            %}
        {% else %}
            {% set options = {
                height: 300,
                width: '100%',
                zoom: 4,
                center: { 'lat': 51.499998 , 'lng': -0.1166662},
                markerOptions: {
                    icon: '/images/map-marker.png'
                    },
                } 
            %}
        {% endif %}

        {% if property is defined %}    
            {{ craft.smartMap.map(property.location, options) }}
        {% endif %}
    &lt;/div&gt;


    &lt;input type="submit" value="Save"&gt;  
&lt;/form&gt;
</code></pre>

<p>And some Javascript to do the business (using jQuery here).</p>

<pre><code>&lt;script&gt;

    $('body').on('click', '.js-address-lookup',  function (event) {
        event.preventDefault;

        var target = '';
        $('.js-address-part').each(function(){
            target += $(this).val() + ',';
        });
        var data   = {target: target};

        var csrfTokenName  = "{{ craft.config.get('csrfTokenName') }}";
        var csrfTokenValue = "{{ craft.request.getCsrfToken }}";

        data[csrfTokenName] = csrfTokenValue; // Append CSRF Token to outgoing data

        $.post('/actions/smartMap/lookup', data, function(response) {
            if(response.status = 'OK'){
                // get lat/lng and populate hidden fields
                $('.js-address-lat').val(response.results[0].geometry.location.lat);
                $('.js-address-lng').val(response.results[0].geometry.location.lng);

                // update map (add marker)
                var lat = parseFloat(response.results[0].geometry.location.lat);
                var lng = parseFloat(response.results[0].geometry.location.lng);
                var newLatLng = new google.maps.LatLng(lat, lng);

                {% if property is defined %}
                    smartMap.marker['smartmap-mapcanvas-1.{{ property.id }}.location'].setPosition(newLatLng)
                {% endif %}

                //smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});

                smartMap.map['smartmap-mapcanvas-1'].panTo(newLatLng);
                smartMap.refreshMap(smartmap-mapcanvas-1);

            } else {
                alert('No address could be found');
            }
        });
    });

&lt;/script&gt;
</code></pre>

CC BY-SA 4.0
2018-07-30T09:48:41.730Z
2018-07-30T09:48:41.730Z
foamcow
<p>I'm using Smart Map in a front end entry form and trying to set the position of a marker as the user enters their address.</p>
<p>I can get the lat/lon lookup working but I'm stumped with the marker itself.</p>
<p>Here's my JavaScript that's doing the lookup and filling in the lat/lon</p>
<pre><code>$.post('/actions/smartMap/lookup', data, function(response) {
    if(response.status = 'OK'){
        // get lat/lng and populate hidden fields
        $('.js-address-lat').val(response.results[0].geometry.location.lat);
        $('.js-address-lng').val(response.results[0].geometry.location.lng);

        // update map (add marker)
        smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});

        var lat = parseFloat(response.results[0].geometry.location.lat);
        var lng = parseFloat(response.results[0].geometry.location.lng);
        var newLatLng = new google.maps.LatLng(lat, lng);
                
        smartMap.marker['smartmap-mapcanvas-1.{{ property.id }}.location'].setPosition(newLatLng)

        smartMap.refreshMap(smartmap-mapcanvas-1);
                
    } else {
        alert('No address could be found');
    }
});
</code></pre>
<p>The docs say to reference the marker as</p>
<pre><code>smartMap.marker['&lt;MAP ID&gt;.&lt;ELEMENT ID&gt;.&lt;FIELD HANDLE&gt;']
</code></pre>
<p>With the <code>&lt;ELEMENT ID&gt;</code> being the ID of the marker's parent element. But what would be? Is that the ID of the entry? I'm trying that but it just seems to lock the browser up and the fields don't save.</p>

CC BY-SA 4.0
2018-07-29T11:57:14.590Z
Do you just want to set the position temporarily for this request or do you want to save it? Usually you need to resave the element - not sure if smartmap includes a custom logic to update the map field only but your way to go is usually change the field value and resave the element
Robin Schambach
CC BY-SA 4.0
2018-07-29T12:03:05.840Z
Seems that the above works fine other than the need to recentre the map. I had another issue (styles wasn't defined) which made it look like it wasn't working.
foamcow
CC BY-SA 4.0
2018-07-29T12:04:04.230Z
Okay, would you mind answering the question with your solution in case someone has the same issue?
Robin Schambach
CC BY-SA 4.0
2018-07-29T12:06:11.153Z
Yes Robin. The idea is to update the position permanently. I'm saving the new lat/lon in a hidden field. This is just for some feedback to the user.
foamcow
CC BY-SA 4.0
2018-07-29T12:06:52.073Z
Will do. Just going to fix the rest of it so I can post a complete answer.
foamcow
<javascript><plugin-smartmap>
Setting the position of a Smart Map marker on the front end
# Setting the position of a Smart Map marker on the front end

(Asked by: username_0 on 2018-07-29)

I'm using Smart Map in a front end entry form and trying to set the position of a marker as the user enters their address.
I can get the lat/lon lookup working but I'm stumped with the marker itself.
Here's my JavaScript that's doing the lookup and filling in the lat/lon
$.post('/actions/smartMap/lookup', data, function(response) {
    if(response.status = 'OK'){
        // get lat/lng and populate hidden fields
        $('.js-address-lat').val(response.results[0].geometry.location.lat);
        $('.js-address-lng').val(response.results[0].geometry.location.lng);

        // update map (add marker)
        smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});

        var lat = parseFloat(response.results[0].geometry.location.lat);
        var lng = parseFloat(response.results[0].geometry.location.lng);
        var newLatLng = new google.maps.LatLng(lat, lng);
                
        smartMap.marker['smartmap-mapcanvas-1.{{ property.id }}.location'].setPosition(newLatLng)

        smartMap.refreshMap(smartmap-mapcanvas-1);
                
    } else {
        alert('No address could be found');
    }
});

The docs say to reference the marker as
smartMap.marker['..']

With the  being the ID of the marker's parent element. But what would be? Is that the ID of the entry? I'm trying that but it just seems to lock the browser up and the fields don't save.

**Tags:** javascript, plugin-smartmap

> **Comments:**
> **username_1**: Do you just want to set the position temporarily for this request or do you want to save it? Usually you need to resave the element - not sure if smartmap includes a custom logic to update the map field only but your way to go is usually change the field value and resave the element  
> **username_0**: Seems that the above works fine other than the need to recentre the map. I had another issue (styles wasn't defined) which made it look like it wasn't working.  
> **username_1**: Okay, would you mind answering the question with your solution in case someone has the same issue?  
> **username_0**: Yes Robin. The idea is to update the position permanently. I'm saving the new lat/lon in a hidden field. This is just for some feedback to the user.  
> **username_0**: Will do. Just going to fix the rest of it so I can post a complete answer.  

---

## 1 answers

### Answer by username_0 on 2018-07-30. Score: 4 | Accepted answer

Turns out my code was pretty much working but there was another issue in there that was stopping the map marker updating. I've since resolved it.
The original form is huge so here's a cut down snippet of the part that does the marker update in case anyone needs it. This cut-down version isn't tested but should be good.
Incidentally, the "parent element ID" to which I referred is the id of the entry in which your map resides.
Basic location update form (my entry is 'property')

    {{ getCsrfInput() }}    
    {% if property is defined %}
        
        
        
        
    {% else %}
        
        
        
        
    {% endif %}

    
        
            Street Address
            
        

        
            City
            
        

        
            County
            
        

        
            Post Code
            
        

        
            Country
            
        


        

        


        Lookup address

    


    
        {% if property is defined and property.location.hasCoords %}

            {% set options = {
                height: 300,
                width: '100%',
                zoom: 11,
                markerOptions: {
                    icon: '/images/map-marker.png'
                    },
                } 
            %}
        {% else %}
            {% set options = {
                height: 300,
                width: '100%',
                zoom: 4,
                center: { 'lat': 51.499998 , 'lng': -0.1166662},
                markerOptions: {
                    icon: '/images/map-marker.png'
                    },
                } 
            %}
        {% endif %}

        {% if property is defined %}    
            {{ craft.smartMap.map(property.location, options) }}
        {% endif %}
    


      


And some Javascript to do the business (using jQuery here).


---

