CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Sharon Imagine
Sharon Imagine

Reputation: 11

Why does google map appear grey and not initialize zoom & center when using buttons with jQuery to change zoom and center on the map works perfectly

I am using the google map api to make a map with custom markers and button that change the center and zoom of the map. I have a global variable for the map and infoWindow. My map appears grey without zoom controls when it's initialized.
I do not have any error messages showing in the console. I have five buttons called : Asia , NorthAmerica, middleEast, newYork, newEngland. The buttons work to change the center and the zoom of the map. But I want the map to start at the initial position in the 

var mapOptions= {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

I use a foreach loop through an object of locations to customize the markers and infoWindows on the map. I also have a function to set the type of makers. That works great.

$(document).ready(function(){

var map, infoWindow;

function for type of custom marker

function initMap() {

map = new google.maps.Map(document.getElementById('map'), mapOptions)

var mapOptions = {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

$("#asia").on('click', function () {
newLocation(37.566535,126.977969,5);
});
$("#northAmerica").on('click', function () {
newLocation(30.902225,-90.659180,4);
});
$("#middleEast").on('click', function () {
newLocation(38.423734,27.142826,4);
});
$("#newYork").on('click', function () {
newLocation(40.753159,-73.98936,12);
});
$("#newEngland").on('click', function () {
newLocation(42.292783,-71.304496,7);
});

'google.maps.event.addDomListener(window, 'load', initMap);' is part of my initMap function after the for loops add the custom markers.

After I close the initMap function but still in the $(document).ready(function(){ initMap is called and function newLocation is defined google.maps.event.addDomListener(window, 'load', initMap);

for each loop for custom markers

object of custom markers locations and infoWindow content

function newLocation(newLat,newLng,newZoom) {
map.setCenter({
    lat : newLat,
    lng : newLng,
  }); 
map.setZoom(newZoom)
};

initMap();

});

Upvotes: 0

Views: 1127

Answers (1)

geocodezip
geocodezip

Reputation: 161404

I get a javasscript error with your posted initMap function: Uncaught TypeError: map.setZoom is not a function on this line: zoom: map.setZoom(4)

that should be: zoom: 4

code snippet:

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(38.423734, 27.142826),
    zoom: 4
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions)

  $("#asia").on('click', function() {
    newLocation(37.566535, 126.977969, 5);
  });
  $("#northAmerica").on('click', function() {
    newLocation(30.902225, -90.659180, 4);
  });
  $("#middleEast").on('click', function() {
    newLocation(38.423734, 27.142826, 4);
  });
  $("#newYork").on('click', function() {
    newLocation(40.753159, -73.98936, 12);
  });
  $("#newEngland").on('click', function() {
    newLocation(42.292783, -71.304496, 7);
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

function newLocation(newLat, newLng, newZoom) {
  map.setCenter({
    lat: newLat,
    lng: newLng,
  });
  map.setZoom(newZoom)
};
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="asia" value="asia" type="button" />
<input id="northAmerica" value="northAmerica" type="button" />
<input id="middleEast" value="middleEast" type="button" />
<input id="newYork" value="newYork" type="button" />
<input id="newEngland" value="newEngland" type="button" />
<div id="map"></div>

Upvotes: 0

Related Questions