Google Maps Integration > Adding Point Markers Zoom Malfunction

Hello, great site I'm learning alot!

Every day after I do the lessons I try out what I've learned on my own localhost website i'm building.

I added the google map to my site like we did in the video.

However, I only had one address and when the map loaded it was fully zoomed in. I verified the mapOptions zoom was set the same as the video.

var mapOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

I verified changing the other options had an effect. I could change the center coordinates as well as the mapTypeId but the zoom had no effect.

As a further test, I used the downloaded project files for Smells Like Bacon and loaded up the locations.html in chrome and sublime text 3. I then removed one of the address elements so that there would be only one marker displayed.

Upon reloading the browser page for locations.html it displayed the same fully zoomed in characteristics.

I spent several hours today googling and trying to find out why it seems that the zoom option is being overwritten with a zoom value of 21, but I was unsuccessful being the js novice that I am. :)

I was wondering if anyone else had encountered this and could explain it to me?

Thanks, Justin