How can I customize the google maps api (v3 javascript) zoom buttons to my own image.
I am late at the party, but here is my two cents.
You have basically two options:
Option 1: You either create the controls using HTML/CSS yourself, which you can then place over the map to the correct position using position absolute or similar means. Even though this works in production, I don't like this, because your HTML/CSS for the element doesn't load at the same time than the map is displayed. Also you are separating your HTML/CSS code for the controls so it is harder to reuse the same map at different pages. e.g. "Did I forgot to add the controls?"
Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.
In short, you need to first disable the normal UI controllers by calling:
var mapOptions = {
zoom: 12,
center: chicago,
/* Disabling default UI widgets */
disableDefaultUI: true // <-- see this line
}
And then you just create the controller and use it.
HTML:
...
<div id="map-canvas"></div>
...
CSS:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
JavaScript:
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The ZoomControl adds +/- button for the map
*
*/
function ZoomControl(controlDiv, map) {
// Creating divs & styles for custom zoom control
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
controlWrapper.style.backgroundColor = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px';
controlWrapper.style.height = '64px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the zoomIn
var zoomInButton = document.createElement('div');
zoomInButton.style.width = '32px';
zoomInButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
controlWrapper.appendChild(zoomInButton);
// Set CSS for the zoomOut
var zoomOutButton = document.createElement('div');
zoomOutButton.style.width = '32px';
zoomOutButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
controlWrapper.appendChild(zoomOutButton);
// Setup the click event listener - zoomIn
google.maps.event.addDomListener(zoomInButton, 'click', function() {
map.setZoom(map.getZoom() + 1);
});
// Setup the click event listener - zoomOut
google.maps.event.addDomListener(zoomOutButton, 'click', function() {
map.setZoom(map.getZoom() - 1);
});
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: chicago,
/* Disabling default UI widgets */
disableDefaultUI: true
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and call the ZoomControl() constructor
// passing in this DIV.
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}
initialize();
Note: This code doesn't contain any fancy icons and a like, just placeholders. Therefore, you might need to tune it to fit your needs. Moreover, remember to add HTML5 normal tags and script include for the google maps api v3 javascript. I added only <div id="map-canvas"></div> because a need for rest of the body is pretty obvious.
To see it live: Here is working jsfiddle example
Cheers.
After hours searching I found the solution
Just make sure you replace your API ID!
Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false®ion=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: 15,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div>
</body>
</html>
I did it in the CSS way:
#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }
This is for a image that has:
width: 42px;
height: 68px;
Make your own adjustments.
ATTENTION
This applies only if you are using English version because of the title attributes.
This isn't possible. You can tweak their appearance a bit using a set of predefined option parameters or you can implement your custom map control that provides the same functionality as the zoom control.
For more information see this page.
UPDATED: Link fixed. Thanks for the feedback!
Related
I have a dataset with different points on a map, stored on GitHub as a GeoJSON. I would like to assign popups to each point of that dataset, that would display some of its data attributes when clicked. I managed to copy some code from Mapbox tutorials but I don't know how to connect my points from the GeoJSON file with the markers.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker {
background-image: url(https://placekitten.com/g/);
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamFua29tYWciLCJhIjoiY2ozNmNhMXQyMDQ4czMybzl6YTN2cDM0ciJ9.naD_i9iNOl_CEZ3WkY8Nvg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.addSource('worldcities_points', {
type: 'geojson',
data: 'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
</script>
</body>
</html>
First off, I would recommend you not to share your access token. Others can use it and you will be billed. As you already have shared it, probably a good idea to disable it.
I have some comments to your code:
You are adding a source. In order to show it on the map, you would have to create a layer for it and add it to the map.
map.addSource('worldcities_points', {
type: 'geojson',
data: 'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});
--> To add it as a layer:
// Add a layer showing the places.
map.addLayer({
'id': 'worldcities_points',
'type': 'symbol',
'source': 'worldcities_points',
'layout': {
'icon-image': '{icon}-15',
'icon-allow-overlap': true
}
});
You can try to add the popups to the map after you have created them for your objects:
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// Open the popup when mouse hover over the position of the object
map.on('mouseenter', 'places', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;// assuming your source geoJSON contains properties.descriptions
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// remove the popup when the mouse leaves the position of the object
map.on('mouseleave', 'places', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
That should get you popups! Let me know if you have questions!
I have a Google Maps map inserted in a css-scaled container. Due to project specifics this cannot be avoided. I need to track clicks coords on this map, but being scaled map sets incorrect coordinates (see the snippet).
How can be this fixed? I have no ideas at the moment :(
const map = new google.maps.Map(document.querySelector('#map'), {
center: {lat: 48.7, lng: 31},
zoom: 6
});
google.maps.event.addListener(map, 'click', (event)=> {
const marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
html, body {
height: 100%;
}
.container {
width: 800px;
height: 600px;
transform: scale(1.2);
}
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?.js"></script>
<div class="container">
<div id="map"></div>
</div>
Ok, figured out how to correct fix (this is when transformation center is 0,0)
function point2LatLng(point, transformScale, map) {
var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale = Math.pow(2, map.getZoom());
var worldPoint = new google.maps.Point(point.x / transformScale / scale + bottomLeft.x, point.y / transformScale / scale + topRight.y);
return map.getProjection().fromPointToLatLng(worldPoint);
}
gmaps.event.addListener(this.map, 'click', (event)=> {
let transformMatrix = window.getComputedStyle(this.$el.closest('.container')).transform.match(/^matrix\((.+)\)$/)[1].split(', ');
let transformScale = parseFloat(transformMatrix[0]);
var marker = new gmaps.Marker({
position: point2LatLng(event.pixel, transformScale, this.map),
map: this.map
});
});
This answer works, but being scaled map works very bad, many coordinate-related functions don't wok correctly. But there is a workaround: place the map in a virtual iframe:
const iframe = this.$el.querySelector('iframe');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<div id="map" style="width: 100%; height: 100%"></div>');
iframe.contentWindow.document.close();
const mapContainer = iframe.contentWindow.document.querySelector('#map');
const map = new gmaps.Map(mapContainer, {
center: {lat: 48.7, lng: 31},
zoom: 6
});
There are no x-origin restrictions and you can manipulate with iframe content how you want. And with it, even if parent container is scaled, everything works fine
I also had this issue and the above solutions didn't work for me because:
#Terion's "point2LatLng" function didn't seem to place the marker in the correct location
#Terion's use of a virtual iframe meant that you can't drag the map, which severely restricted the user experience.
However I did find a way to do it: I put the map div inside a container which I effectively un-scaled with this JS, loaded after all other JS:
//Function: Unscale the map Container
function unscaleMap(scale){
var unscale = Math.round(10000/(scale * 1))/10000,
rescale = Math.round(10000 * (100 / unscale))/10000;
document.getElementById("fs_mapContainer").style.transform = "scale("+unscale+")";
document.getElementById("fs_mapContainer").style.width = rescale + "%";
document.getElementById("fs_mapContainer").style.height = 80 * scale + "vh";
}
And CSS:
.map_container {position: relative; transform-origin: 0 0; box-sizing: border-box;}
#map {width: 100%; height: 100%}
I have a webpage that uses Google maps and the MarkerCluster API.
I need to be able to get all of the clusters on the map at a given zoom level. Take this code for example:
//Where the center of the screen will be
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 13,
'center': center,
//Google map type
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
//Create the google map
var map = new google.maps.Map(document.getElementById("map"), options);
//Create the marker clusters, where markers is an array of lat and longs
var mc = new MarkerClusterer(map, markers);
//Print all of the clusters at zoom level 13
console.log(mc.getTotalClusters());
The problem is if there are 10 clusters at zoom level 13, but only 7 are inside of my screen's bounds, then the above code would only print out 7. I need a way to get access to all clusters, even if they're not on the screen.
Simple example of how the MarkerClusterer works:
https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html
Here are some references to the MarkerCluster API:
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
https://googlemaps.github.io/js-marker-clusterer/docs/examples.html
https://developers.google.com/maps/articles/toomanymarkers
Indeed, getTotalClusters function returns the number of clusters only for markers visible within a current viewport.
One option to get the total amount of clusters would be to disable the checking whether the marker is located within a current viewport by overriding the function that creates clusters:
MarkerClusterer.prototype.createClusters_ = function() {
if (!this.ready_) {
return;
}
for (var i = 0, marker; marker = this.markers_[i]; i++) {
//if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
if (!marker.isAdded) {
this.addToClosestCluster_(marker);
}
}
};
Working example
MarkerClusterer.prototype.createClusters_ = function() {
if (!this.ready_) {
return;
}
for (var i = 0, marker; marker = this.markers_[i]; i++) {
//if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
if (!marker.isAdded) {
this.addToClosestCluster_(marker);
}
}
};
function initMap(data) {
var center = new google.maps.LatLng(59.339025,18.065818);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < data.photos.length; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log("Total number of clusters: " + markerCluster.getTotalClusters());
});
}
google.maps.event.addDomListener(window, 'load',
function(){
$.getJSON("https://gist.githubusercontent.com/vgrem/fb601469049c4be809ad4ea4bbcdc381/raw/data.json")
.success(function(data) {
initMap(data);
});
});
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div id="map-container"><div id="map"></div></div>
Plunker
I have an infobox on a clickable polylines and polygons.
When I click any of them an invisible marker is created and the infoxbox pops up for it.
The problem is that when the infoxbox appears the map dissapears.
I don't get any javascript errors.
This is my code:
(I have commented out all infoxbox features apart of the content text)
google.maps.event.addListener(mapObject, 'click', function(event) {
var invisibleMarker = new google.maps.Marker({
position: new google.maps.LatLng(event.latLng),
map: map
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: none; padding: 0;";
boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';
var myOptions = {
content: boxText
/*,latlng: event.latLng
,alignBottom: true
,pixelOffset: new google.maps.Size(-470, -20)
,boxStyle: {
background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
,opacity: 1
,width: "470px"
}
,closeBoxMargin: "18px 18px 2px 2px"
,closeBoxURL: "/media/images/map-marker-info-close.gif"
,infoBoxClearance: new google.maps.Size(5, 5)
,enableEventPropagation: false*/
};
var ib = new InfoBox(myOptions);
ib.open(map, invisibleMarker);
});
Can anybody help me resolve this issue?
Thank you
There are a couple of problems:
1) google.maps.event.addListener(mapObject, 'click', function(event)
You haven't provided your map creation code, but the variable mapObject should be a map object... That doesn't fit with any of your other references to the map object map.
2) new google.maps.LatLng(event.latLng)
You don't need to parse the event.LatLng value, it will already be a latitude/longitude value.
Here is a working example, with the corrections noted above. The InfoBox will output undefined because content[0] is undefined, but that can be any valid text you want.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var map;
function test()
{
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var invisibleMarker = new google.maps.Marker({
position: event.latLng,
map: map
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: none; padding: 0;";
boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';
var myOptions = {
content: boxText
/*,latlng: event.latLng
,alignBottom: true
,pixelOffset: new google.maps.Size(-470, -20)
,boxStyle: {
background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
,opacity: 1
,width: "470px"
}
,closeBoxMargin: "18px 18px 2px 2px"
,closeBoxURL: "/media/images/map-marker-info-close.gif"
,infoBoxClearance: new google.maps.Size(5, 5)
,enableEventPropagation: false*/
};
var ib = new InfoBox(myOptions);
ib.open(map, invisibleMarker);
});
}
</script>
</head>
<body onload="test();">
<div id="map_canvas"></div>
</body>
</html>
I want to use similar styled InfoBox for my polylines but need to pass clicked position I think. In original simple code it was
infowindow.setContent(content[0]);
infowindow.position = event.latLng;
infowindow.open(map);
and it worked
I have no idea how to do it for InfoBox. I tried to use in InfoBox options:
latlng: event.latLng
and then:
var ib = new InfoBox(myOptions);
ib.setPosition(event.latLng);
ib.open(map, mapObject);
but I'm getting:
Error: anchor.getPosition is not a function
Source File: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js
I have a demo here http://jsfiddle.net/coderslay/vQVTq/1/
My Js file
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var panoramaOptions = {
enableCloseButton : true,
visible: false
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView : panorama
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(panorama, "visible_changed", function() {
if (panorama.getVisible() && $("#pano").is(':visible')){
//moving the pegman around the map
}else if(panorama.getVisible() && $("#pano").is(':hidden')){
$("#pano").show();
$("#map_canvas").removeClass('bigmap');
$("#map_canvas").addClass('minimap');
latLngBounds = new google.maps.LatLngBounds();
latLngBounds.extend( new google.maps.LatLng(panorama.getPosition().lat(), panorama.getPosition().lng()));
map.panToBounds(latLngBounds);
map.fitBounds(latLngBounds);
}
google.maps.event.addListener(panorama, "closeclick", function() {
$("#pano").hide();
$("#map_canvas").removeClass('minimap');
$("#map_canvas").addClass('bigmap');
});
});
My css file
#container {
width:500px;
height: 500px ;
position: relative;
}
#map_canvas,
#pano {
position: absolute;
top: 0;
left: 0;
}
#map_canvas {
z-index: 10;
}
.bigmap{
width:100%;
height:100%;
}
.minimap{
width:50%;
height:100%;
}
Now what is happening is when i do map.panToBounds(latLngBounds); map.fitBounds(latLngBounds); then the pegman is coming at the center of the entire map, regardless of the Street view and normal view. I want the Pegman to be shown at the center of the normal map. How to do it?
It seems to me as if, even though you've changed the width of the map to 50%, Google still thinks it's at 100%, and doesn't know to dynamically adjust it. You could try removing then adding a new map at the new width instead.
Alternatively, try the Map panBy() function to pan left 250 pixels.
PS: why is the pano set to 100% width and not 50%?