I've been teaching myself Javascript through online examples and trial and error for a little while now but I've come upon an issue that I just do not freaking understand and it is driving me pretty much crazy. Please excuse any and all flub ups in language/terminology & lack of basic coding knowledge.
I have a functioning call to the Google Maps API that is working on my personal site but I hate the way that fitBounds() adds 45px of padding to the boundaries of the map box. I read on that same thread a potential solution on re-doing the math for the fitBounds() with something custom, called myFitBounds, which was also detailed on what I presume is the user's site.
So I tried to plug in his code into my javascript call, but I am getting absolutely nowhere with it. When I run the script in a debugger, I get an error:
undefined is not a function (evaluating 'map.myFitBounds(map, bounds)')
Now, I'm totally certain that I'm not calling this correctly, somehow. But since I have no training whatsoever on javascript, and I can not find a single example of how to call this particular custom function in the GMaps API environment, I am super confused on what I need to do.
Here is the code between my script tags. The myFitBounds() call is located in the same place in the code as the fitBounds() call in the functioning example.
<script>
function map_initialize() {
var places = [
{
name: 'Boston',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">BOS</div><div class="iwcity"><a href="airportinfo.cfm?airport=BOS">Boston</a></div>'+
'</div>',
latlng: new google.maps.LatLng(42.36566960626233, -71.00959794628909)
},
{
name: 'New York City',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">LGA</div><div class="iwcity"><a href="airportinfo.cfm?airport=LGA">New York City</a></div>'+
'</div>',
latlng: new google.maps.LatLng(40.776941170264045, -73.87393968212893)
},
{
name: 'Orlando',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">MCO</div><div class="iwcity"><a href="airportinfo.cfm?airport=MCO">Orlando</a></div>'+
'</div>',
latlng: new google.maps.LatLng(28.43121198017089, -81.30807893383792)
}
];
var mapoptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("mapdiv"),
mapoptions);
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
/*
Markers
*/
for (var i = 0; i < places.length; i++) {
var marker = new google.maps.Marker({
position: places[i].latlng,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeColor: 'black'
},
map: map,
title: places[i].name,
content: places[i].name
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(places[i].display);
infowindow.open(map, marker);
}
})(marker, i));
}
/*
Fit to Bounds
*/
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < places.length; i++) {
bounds.extend(places[i].latlng);
}
/*
Custom Fit to Bounds
*/
function myFitBounds(map, bounds) {
map.fitBounds(bounds); // calling fitBounds() here to center the map for the bounds
var overlayHelper = new google.maps.OverlayView();
overlayHelper.draw = function () {
if (!this.ready) {
var extraZoom = getExtraZoom(this.getProjection(), bounds, map.getBounds());
if (extraZoom > 0) {
map.setZoom(map.getZoom() + extraZoom);
}
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
overlayHelper.setMap(map);
}
function getExtraZoom(projection, expectedBounds, actualBounds) {
// in: LatLngBounds bounds -> out: height and width as a Point
function getSizeInPixels(bounds) {
var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
}
var expectedSize = getSizeInPixels(expectedBounds),
actualSize = getSizeInPixels(actualBounds);
if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
return 0;
}
var qx = actualSize.x / expectedSize.x;
var qy = actualSize.y / expectedSize.y;
var min = Math.min(qx, qy);
if (min < 1) {
return 0;
}
return Math.floor(Math.log(min) / Math.LN2 /* = log2(min) */);
}
/*
* Starter Marker in Gold
*
*/
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.776941170264045, -73.87393968212893),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3.5,
strokeColor: 'gold'
},
draggable: false,
map: map
});
/*
* Adds the Flight Paths in great circles
*
*/
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(40.776941170264045, -73.87393968212893),new google.maps.LatLng(42.36566960626233, -71.00959794628909)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
flightPath.setMap(map);
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(28.43121198017089, -81.30807893383792),new google.maps.LatLng(40.776941170264045, -73.87393968212893)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
flightPath.setMap(map);
map.myFitBounds(map, bounds);
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>
I'm really sorry if this looks like total crap to all of you, but I do appreciate the help and time as I learn more about this.
