How to set up javascript functions in Rails?

Question

I'm not sure how to load my google maps API code outside of a script that's not in my HTML page.

I get the error:

Error: google is not defined
Source File: http://localhost:3000/javascripts/google-map.js?1319030830
Line: 57

This is the line it is talking about:

google.maps.event.addDomListener(window, 'load', initialize);

Here is the full code of my google-map.js file:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng( 37.09024 ,-95.712891 ),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('google_map'),
    mapOptions);

    var input = document.getElementById('business_retail_address');
    var options = { types: ['geocode']};

    autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(16);  // Why 17? Because it looks good.
        }

        var image = new google.maps.MarkerImage(
        place.icon,
        new google.maps.Size(71, 71),
        new google.maps.Point(0, 0),
        new google.maps.Point(17, 34),
        new google.maps.Size(35, 35));
        marker.setIcon(image);
        marker.setPosition(place.geometry.location);

        var address = '';
        if (place.address_components) {
            address = [(place.address_components[0] &&
                place.address_components[0].short_name || ''),
            (place.address_components[1] &&
                place.address_components[1].short_name || ''),
            (place.address_components[2] &&
                place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindow.setContent();
        infowindow.open(map, marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

I have little understanding of Javascript right now so I am at a lost of how to load this correctly or how to write the function in the JS file itself.

How do I put this google script in a JS file correctly?

Thank you.

Russ Cam · Accepted Answer · 2011-10-19 13:43:06Z

1

Are you loading the google maps script before your script in the page? It looks like you might not be.

You need

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

then your script reference

<script type="text/javascript" src="your-script.js"></script>

put this either in the <head> section, or before the closing </body> tag.

answered Oct 19, 2011 at 13:43

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LearningRoR Over a year ago

Yeah in my <head> its:<script src="maps.googleapis.com/maps/api/…>

Collectives™ on Stack Overflow

How to set up javascript functions in Rails?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related