0

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.

1 Answer 1

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.

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

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.