geotube search youtube with google maps javascript

This is a fun project letting you search the youtube api using google maps. My first version of this project used some nodejs, but now it’s done entirely with javascript in the browser which makes it super fast, and fun to play with. You can try the geotube demo here.












How it works. Start by making a proper web page:

Next we’ll include jQuery and the google maps api code. For the maps api, you’ll see the key variable. You’ll need to create your own Google API key as this one is mine and it’s locked to my domain names. They are free up to 25,000 requests per day.

Layout some basic css formatting:

You may want to set the default latitude and longitude, you can do that with the variable on line 5. Next interesting thing is setting of the mapOptions, these are some default settings used when the map first loads.

Zoom sets the scale or zoom level of the map. Next we want the default UI.


End the HTML and the place for the div which will contain the map as well as the youtube search results. Have fun!