I am having issues with the following script as the zoom function does not work at all. I am attempting to zoom out so we can see all three bubbles, but it continues to zoom in only on one no matter what I adjust the Zoom to. Any help would be highly appreciated in resolving this weird issue.
Here is the code:
/**
* Module: Maps
* Functions for Google Map instances. Called in mg_load_scripts()
*/
const gmap_utils = require( './gmaps-utils' );
const js_info_bubble = require( 'js-info-bubble' );
function init() {
var map = new google.maps.Map(
document.getElementById('contact__gmap'),
{
center: { lat: 39.53460115430569, lng: -76.3520661918299 },
zoom: 7,
disableDefaultUI: true,
styles: gmap_utils.getStyles(),
}
);
var contactMap = $("[data-gmap='#contact__gmap']");
var infoBubble = new InfoBubble({
map: map,
content: contactMap[0],
position: new google.maps.LatLng( 39.53460115430569, -76.3520661918299 ),
backgroundColor: '#a8de00',
borderRadius: 0,
borderColor: 'rgba( 0, 0, 0, 0 )',
padding: 20,
arrowSize: 20,
});
var dcBubble = new InfoBubble({
map: map,
content: contactMap[1],
position: new google.maps.LatLng( 38.91172021157104, -77.0321827083924 ),
backgroundColor: '#a8de00',
borderRadius: 0,
borderColor: 'rgba( 0, 0, 0, 0 )',
padding: 20,
arrowSize: 20,
disableAutoPan: true,
});
var chicagoBubble = new InfoBubble({
map: map,
content: contactMap[2],
position: new google.maps.LatLng( 41.89011800871505, -87.63364960641907 ),
backgroundColor: '#a8de00',
borderRadius: 0,
borderColor: 'rgba( 0, 0, 0, 0 )',
padding: 20,
arrowSize: 20,
minWidth: 280,
disableAutoPan: true,
});
infoBubble.open();
dcBubble.open();
chicagoBubble.open();
}
/**
* Public API
* @type {Object}
*/
module.exports = {
init: init
};
I tried to adjust the zoom level but it does nothing at all.
Dave is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.