apneadiving / Google-Maps-for-Rails

Enables easy Google map + overlays creation in Ruby apps
https://apneadiving.github.io/
MIT License
2.27k stars 382 forks source link

Uncaught TypeError: Cannot read property 'addMarker' of undefined #518

Closed nynhex closed 8 years ago

nynhex commented 8 years ago

I just upgraded to the latest version of gmapsforrails and have setup my views properly per the docs. I'm trying to render a bunch of units on a map but the map displays but the units do not and in the dev console I get: handler.js?body=1:38 Uncaught TypeError: Cannot read property 'addMarker' of undefined

Here is my controller and view code

gps_controller.rb

  def show
    @units   = Unit.active.sort_by {|u| u.unit_name[/\d+/].to_i}
    @markers = Gmaps4rails.build_markers(@units) do |unit, marker|
      marker.lat unit.latitude
      marker.lng unit.longitude
    end
    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @markers }
    end
  end

gps/show.html.erb

<div class="row">
  <div class="span10">
    <div style='width: 800px;'>
      <div id="map" style='width: 800px; height: 400px;'></div>
    </div>

  </div>
<script>
$(function(){
  markers = window.handler.addMarkers([{"lat":42.3584308,"lng":-71.0597732},{"lat":40.7127837,"lng":-74.0059413},{"lat":42.2286954,"lng":-71.5225646},{"lat":42.3736158,"lng":-71.1097335}]);
});
</script>
<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
        "width":  32,
        "height": 32
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});
</script>

<script>
    markers = handler.addMarkers(<%=raw @markers.to_json %>);
</script>

In the head of application.html.erb

  <script src="//maps.google.com/maps/api/js?v=3.24&key=AIzaSyCgOSlUHR_dRboKncJjbMbtLt42asTKHoE&sensor=false&libraries=places,drawing,geometry"></script>
    <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

Not sure what the problem is here, I honestly don't have a thorough enough understanding of the API and this gem to debug myself without countless hours being spent. Has anyone ran across this and can you suggest a fix?

apneadiving commented 8 years ago

The problem here is you call markers = window.handler.addMarkers before you define the handler

Hamdan85 commented 6 years ago

`

<% real_estates.each do |real_estate| %> <%= render partial: 'real_estates/shared/real_estate_row', locals: { real_estate: real_estate} %> <% end %>


` I'm not and still getting the error.

apneadiving commented 6 years ago

@Hamdan85 your js is messed up. Few points: google doesnt create the map right away, this is why buildMap takes a function as an argument. This function is executed whenever map is ready. Then do not try to fit map to markers without markers created. There is a plunk there showing it works properly: https://plnkr.co/edit/HagqQ6yt0QUDjCGhp6Ha?p=preview