Question

I am having an issue getting bounds to work with my google map. All markers are pointing to the correct coordinates, but when they appear on the map, the auto zoom does not adjust properly. Can someone please help me with my var bounds please.

var companyLocale = new google.maps.LatLng(33.206060, -117.111951);
var noGeo = new google.maps.LatLng(40.69847032728747, -73.9514422416687);


function initialize() {
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

   <!-------------------------------USER MARKERS-------------------> 
  var usericon = new google.maps.MarkerImage(
    'images/userimage.png',
    new google.maps.Size(48,48),
    new google.maps.Point(0,0),
    new google.maps.Point(24,48)
  );

  var usershadow = new google.maps.MarkerImage(
    'images/usershadow.png',
    new google.maps.Size(76,48),
    new google.maps.Point(0,0),
    new google.maps.Point(24,48)
  ); 
  <!-------------------------------COMP MARKERS------------------->
  var icon = new google.maps.MarkerImage(

    'images/image.png',
    new google.maps.Size(48,48),
    new google.maps.Point(0,0),
    new google.maps.Point(24,48)
  );

  var shadow = new google.maps.MarkerImage(
    'images/shadow.png',
    new google.maps.Size(76,48),
    new google.maps.Point(0,0),
    new google.maps.Point(24,48)
  );

function toggleBounce() {

    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Safari supports the W3C Geolocation method
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

      var bounds = new google.maps.LatLngBounds();
      var placeMarker = new google.maps.Marker({
        position: initialLocation,
        icon: usericon,
        shadow: usershadow,
        animation: google.maps.Animation.DROP,
        map: map
      });
      map.setCenter(initialLocation);

       var bounds = new google.maps.LatLngBounds();
       var Marker = new google.maps.Marker({
        position: companyLocale,
        icon: icon,
        shadow: shadow,
        animation: google.maps.Animation.DROP,
        map: map
      });

       google.maps.event.addListener(Marker, 'click', function() {
        window.location = "main-export/main.html";
 });
       google.maps.event.addListener(placeMarker, 'click', function() {
        window.location = "main-export/loyalty.html";
 });

    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation();
  }

  function handleNoGeolocation() {
    initialLocation = noGeo;
    map.setCenter(initialLocation);
  }
  bounds.extend(myLatLng);
    map.fitBounds(bounds);
}

Answer 1

You have bounds.extend(myLatLng); but nowhere does myLatLng get created. You seem to only have two markers, so you should just need to call bounds twice, once for each latlng.

Replace bounds.extend(myLatLng); with

bounds.extend(companyLocale);
bounds.extend(initialLocation);