Ruby on Rails: Adding a local image in a Google Maps marker -
i have page show_map.html.erb displays google map (currently working great). want add image instead of pin marker on map. have googled lot question, , found resources such this question on stackoverflow. however, current solution doesn't work.
do have upload image before using it? moreover, why can't use images public/alert.png or app/asset/images/alert.png? referred the google maps api documentation too, can't understand examples.
my controller:
def show_map @location = location.find(params[:id]) @address = @location.landmark.gsub(","+")+",+"+@location.place.gsub(","+")+",+"+@location.country p @address end my view:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<my api key>&sensor=true"> type="text/javascript"></script> <script type="text/javascript"> var contentstring = '<div id="content">'+ '<div id="sitenotice">'+ '</div>'+ '<h2 id="firstheading" class="firstheading" ><font color="#ff0000"><%=@location.title%></font></h2>'+ '<div id="bodycontent" >'+ '<p><%=@location.description%></p>'+ '<p><a href="http:www.google.com">'+ 'more info</a> (created on <%=(@location.created_at).strftime("%a, %d/%m/%y")%>)</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.infowindow({ content: contentstring }); //set image //var image = '/assets/images/alert.png'; // enable visual refresh google.maps.visualrefresh = true; var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 17, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map"), mapoptions); //var image = "#{rails.root}/app/assets/images/alert.png"; //code search address //var address = document.getelementbyid("address").value; var address='<%= @address.parameterize %>'; //alert(address); geocoder = new google.maps.geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location, title:"<%=@location.title%>", animation: google.maps.animation.drop, visible: true, draggable: true, icon: image }); //animation marker function togglebounce() { if (marker.getanimation() != null) { marker.setanimation(null); } else { marker.setanimation(google.maps.animation.drop); } } //commented show info on click on marker google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); //listener animation google.maps.event.addlistener(marker, 'click', togglebounce); } else { alert("geocode not successful following reason: " + status); } }); } </script> <body onload="initialize()"> <div id="map" align="right" style="min-height: 500px; height: 400px; width: 400px"></div> </body>
if you're using gmaps4rails gem , presuming you've added dependencies , scripts will have similar following in controller. replace "xyz" , add own web address.
def index @xyzs = xyz.all @hash = gmaps4rails.build_markers(@xyz) |xyz, marker| marker.lat xyz.latitude marker.lng xyz.longitude marker.infowindow xyz.artist marker.picture({ url: "www.yourwebaddresshere.com", width: 32, height: 32, }) end there live samples , video documentation gem found quite helpful.
Comments
Post a Comment