Add Infowindow on click of marker using geocomplete in Rails 3.2 -

Add Infowindow on click of marker using geocomplete in Rails 3.2 -

i have been trying implement infowindow on google map working great using geocomplete.js search/get details of street , getting lang/lat well. need infowindow on marker when user clicks marker, can show few more info unable working not able error can debug , resolve it.i know missing think code simple , should infowindow.here code in _view.html.erb rendered on bootstrap 3 modal.

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> <script src="assets/jquery.geocomplete.js"></script> <p class="text-center text-success">add location</p> <hr> <div class="container"> <%= form_for(@place,:html=>{:multipart => true,:remote=>true,:class=>"form-horizontal",:role=>"form"}) |f |%> <%= f.text_field :address,:class=>"form-control" %> <p class="text-info" style="font-size:10px !important;">if cannot find location,drag marker on map. </p> <div id="logs" data-lat="<%= current_user.latitude%>" data-long="<%= current_user.longitude%>"> <%= current_user.address %> </div> <div id="mapnew" style="width:500px;height:500px"></div> <%end%> </div> <script type="text/javascript"> var lat=$('#logs').data("lat"); var long=$('#logs').data("long"); var mylatlng = new google.maps.latlng(lat,long); var options = { map: "#mapnew", location: mylatlng, mapoptions: { streetviewcontrol: false, center: mylatlng, maptypeid : google.maps.maptypeid.roadmap }, markeroptions: { draggable: true } }; function initialize(){ $("#place_address").geocomplete(options).bind("geocode:result", function(event, result){ $('#logs').html('<b>'+result.formatted_address+'</b>'); var map = $("#place_address").geocomplete("map"); map.setzoom(15); map.setcenter(result.geometry.location); //get marker /////////////////////////////here marker set infowindow doesnt works ////////////////////this code not working -start var marker = $("#place_address").geocomplete("marker"); marker.setmap(map); var infowindow = new google.maps.infowindow({ content:"hello world!" }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); ///////////////////////this code not working-ends });//method ends $("#place_address").bind("geocode:dragged", function(event, latlng){ console.log('dragged lat: '+latlng.lat()); console.log('dragged lng: '+latlng.lng()); //set true save coordinated straight in db without using geocoder var map = $("#place_address").geocomplete("map"); map.panto(latlng); var geocoder = new google.maps.geocoder(); geocoder.geocode({'latlng': latlng }, function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results[0]) { var road = results[0].address_components[1].long_name; var town = results[0].address_components[2].long_name; var county = results[0].address_components[3].long_name; var country = results[0].address_components[4].long_name; $('#logs').html('<b>'+road+' '+town+' '+county+' '+country+'</b>'); } } }); });//method ends }//initialize method ends $(document).ready(function(){ $('#mapnew').html("<p class='text-center text-alert'><b><i>loading map...</i><i class='fa fa-spinner fa-spin fa-2x'></i></b></p>"); //load map after 2 seconds avoid blurring settimeout('initialize()', 3000); })//document ready ends </script>

your script works me, maybe don't desired result.

the marker drawn on map created based on options.location

you provide latlng location, there nil geocode , geocode:result-handler not run when marker created(therefore infowindow not added)

possible solution: trigger geocode:result-event , pass available data:

$("#place_address") .geocomplete(options) .bind("geocode:result", function(event, result){ $('#logs').html('<b>'+result.formatted_address+'</b>'); var map = $("#place_address").geocomplete("map"), ///////////////////////this code should work expected-starts marker = $("#place_address").geocomplete("marker"); //there single marker, utilize single infowindow if(!marker.get('infowindow')){ marker.set('infowindow',new google.maps.infowindow()); google.maps.event.addlistener(marker, 'click', function() { this.get('infowindow').open(map,this); }); } marker.get('infowindow').close(); map.setzoom(15); map.setcenter(result.geometry.location); marker.setmap(map); marker.get('infowindow').setcontent(result.formatted_address) ///////////////////////this code should work expected-ends }) //method ends //trigger event .trigger('geocode:result', {geometry:{location:mylatlng}, formatted_address:$('#logs').text()});

ruby-on-rails ruby-on-rails-3 google-maps geocode rails-geocoder