Databases
StackOverflow2013
Postsdbo
POgmaps4rails - Existing marker doesn't get cleared when dropping a new marker in the form
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POgmaps4rails - Existing marker doesn't get cleared when dropping a new marker in the form
    primarykey
    data
    text
    <p>I have a Rails 3.2 app that allows a user to create a shop and I want the user to put their shop on the map. I tried the <a href="https://github.com/apneadiving/Google-Maps-for-Rails/" rel="nofollow">gmaps4rails</a> gem &amp; got it to work by using the default configuration — converting the address input by the user to coordinates &amp; show the marker on the map. However I find the conversion process inconsistent in accuracy &amp; I prefer to let the user to drop their own marker on the map.</p> <p>This is my code after following the gem's readme:</p> <pre><code># migration t.string "address", :null =&gt; false t.float "latitude" t.float "longitude" t.boolean "gmaps" # model Shop.rb attr_accessible :name, :address, :latitude, :longitude acts_as_gmappable def gmaps4rails_address address end # shops_controller.rb def show @shop = Shop.find(params[:id]) @json = Shop.all.to_gmaps4rails end def edit @shop = Shop.find(params[:id]) @json = Shop.all.to_gmaps4rails end def update @shop = Shop.find(params[:id]) @json = Shop.all.to_gmaps4rails if @shop.update_attributes(params[:shop]) flash[:success] = "Shop's updated." redirect_to shop_path(@shop) end end # view &lt;%= gmaps4rails(@json) %&gt; </code></pre> <p>The form partial (referenced from the gem's <a href="https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Javascript-goodies" rel="nofollow">wiki</a>):</p> <pre><code># _form.html.erb .... &lt;%= gmaps4rails(@json) %&gt; &lt;% content_for :scripts do %&gt; &lt;script type="text/javascript" charset="utf-8"&gt; var markersArray = []; // On click, clear markers, place a new one, update coordinates in the form Gmaps.map.callback = function() { google.maps.event.addListener(Gmaps.map.serviceObject, 'click', function(event) { clearOverlays(); placeMarker(event.latLng); updateFormLocation(event.latLng); }); }; // Update form attributes with given coordinates function updateFormLocation(latLng) { $('#shop_attributes_latitude').val(latLng.lat()); $('#shop_attributes_longitude').val(latLng.lng()); $('#shop_attributes_gmaps_zoom').val(Gmaps.map.serviceObject.getZoom()); } // Add a marker with an open infowindow function placeMarker(latLng) { var marker = new google.maps.Marker({ position: latLng, map: Gmaps.map.serviceObject, draggable: true }); markersArray.push(marker); // Set and open infowindow var infowindow = new google.maps.InfoWindow({ content: '&lt;div class="popup"&gt;&lt;h2&gt;Awesome!&lt;/h2&gt;&lt;p&gt;Drag me and adjust the zoom level.&lt;/p&gt;' }); infowindow.open(Gmaps.map.serviceObject,marker); // Listen to drag &amp; drop google.maps.event.addListener(marker, 'dragend', function() { updateFormLocation(this.getPosition()); }); } // Removes the overlays from the map function clearOverlays() { if (markersArray) { for (var i = 0; i &lt; markersArray.length; i++ ) { markersArray[i].setMap(null); } } markersArray.length = 0; } &lt;/script&gt; </code></pre> <p>Problems:</p> <ul> <li>When clicked on the map, the existing marker doesn't get cleared. It does give a new marker though.</li> <li>When I click the submit button, the latitude &amp; longitude are not updated to reflect the new position of the new marker. It just use the old one.</li> </ul> <hr> <p><strong>UPDATE</strong></p> <p>I managed to get the "update the marker position" part working but the existing marker still not cleared when map was clicked in the form. The result on the show page only shows the updated marker, which is nice.</p> <p>Here's the updated code:</p> <pre><code># Shop.rb acts_as_gmappable :process_geocoding =&gt; false # no more def gmaps4rails_address in the model # controller def show @json = Shop.find(params[:id]).to_gmaps4rails end def edit @json = Shop.find(params[:id]).to_gmaps4rails end def update @shop = Shop.find(params[:id]) # @json = Shop.all.to_gmaps4rails # not needed here ... end # _form.html.erb &lt;%= gmaps4rails(@json) %&gt; &lt;%= f.hidden_field :latitude %&gt; &lt;%= f.hidden_field :longitude %&gt; &lt;% content_for :scripts do %&gt; ... function updateFormLocation(latLng) { $('#shop_latitude').val(latLng.lat()); $('#shop_longitude').val(latLng.lng()); $('#shop_gmaps_zoom').val(Gmaps.map.serviceObject.getZoom()); } ... </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USi.am.noob
    1. USi.am.noob
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POgmaps4rails - Existing marker doesn't get cleared when dropping a new marker in the form
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POgmaps4rails - Existing marker doesn't get cleared when dropping a new marker in the form
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POgmaps4rails - Existing marker doesn't get cleared when dropping a new marker in the form
      1. USadamteale
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload