cluster1
Reputation: 5752
Google Maps API : Code stops work after making a change
I've got these code. Using Google Maps API together with additional, self-written CSS-, JavaScript-code:
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.querySelector('#map'), {
zoom: 16,
center: {lat: 49.2164353, lng: 6.9752852},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.212860, 6.969140),
new google.maps.LatLng(49.219644, 6.982938)
);
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'imgs/ground_plan.jpg';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
}
// [END region_initialization]
// [START region_constructor]
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
// Die CSS-property legt die Durchsichtigkeit eines Elementes fest.
// 1.0 => Keine Durchsichtigkeit.
// 0.0 => Vollkommene Durchsichtkeit.
div.style.opacity = '0.5';
// Positive Zahl => Dreht im Uhrzeigersinn.
div.style.transform = 'rotate(17deg)';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
USGSOverlay.prototype.hide = function() {
if (this.div_) {
// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';
}
};
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility === 'hidden') {
this.show();
} else {
this.hide();
}
}
};
google.maps.event.addDomListener(window, 'load', initMap);
var toggleButton = document.querySelector('#toggleOverlay');
var increaseButton = document.querySelector('#increaseOpacity');
var decreaseButton = document.querySelector('#decreaseOpacity');
var opacityDisplay = document.querySelector('#current-opacity');
function updateDisplay() {
opacityDisplay.innerHTML =
parseFloat(overlay.div_.style['opacity']).toFixed(1);
}
function setOpacity(step, limit) {
let currentStyle = overlay.div_.style;
let opacity = parseFloat(currentStyle['opacity']); // currentStyle['opacity'] is a STRING !!
if (opacity !== limit) {
opacity += step // Calculation has to be done ONLY with numbers because STRING + NUMBER results in a string.
currentStyle['opacity'] = opacity; // The number will be converted into a string.
updateDisplay();
if (opacityDisplay.classList.contains('limit-reached')) {
opacityDisplay.classList.remove('limit-reached');
}
} else {
opacityDisplay.classList.add('limit-reached');
}
}
increaseButton.addEventListener('click', function() {
setOpacity(-0.1, 0.0);
});
decreaseButton.addEventListener('click', function() {
setOpacity(0.1, 1.0);
});
toggleButton.addEventListener('click', function() {
let current = overlay.div_.style.visibility;
let that = this;
function setValues(that, visibleVal, newButtonText) {
overlay.div_.style.visibility = visibleVal;
that.textContent = newButtonText;
}
current === 'hidden' ?
setValues(that, 'visible', 'hide overlay') :
setValues(that, 'hidden', 'show overlay');
});
opacityDisplay.addEventListener('load', updateDisplay);html, body {
height: 100%;
margin: 0;
padding: 0; }
body {
background-color: #d9d9d9; }
.wrap {
width: 1000px;
height: 100%;
margin: 0 auto; }
nav {
margin: 5px 10px; }
#map {
height: 100%;
border-radius: 6px;
border: 1px solid black; }
a.default-button {
text-decoration: none; }
#current-opacity, .default-button {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica;
padding: 5px 10px;
color: #4367c5;
border: 3px solid #4367c5;
font-weight: 900;
display: inline-block;
text-align: center;
border-radius: 6px; }
#current-opacity {
width: 50px;
position: relative; }
#current-opacity:after {
content: attr(data-hint);
position: absolute;
display: none;
color: crimson;
left: 80%;
top: 5px;
background-color: white;
padding: 5px 10px;
white-space: nowrap;
border-radius: 20px;
border: 3px solid crimson;
box-shadow: 6px 6px 9px #646464;
z-index: 1000;
font-size: 0.9rem;
transform: rotate(5deg); }
#current-opacity.limit-reached:after {
display: block; }
.default-button {
text-transform: uppercase;
min-width: 150px; }
.default-button:hover {
color: #009e60;
border-color: #009e60; }
.default-button:active {
opacity: 0.6; }<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Werk 1 - Saarbrücken</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="wrap">
<nav class="nav">
<a href="#" class="default-button" id="toggleOverlay">Hide overlay</a>
<a href="#" class="default-button" id="increaseOpacity">Increase opacity</a>
<a href="#" class="default-button" id="decreaseOpacity">Decrease opacity</a>
<div id="current-opacity" data-hint="Limit reached">0.5</div>
</nav>
<div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AFDi434FSDFASFD343434af&signed_in=true"></script>
<script src="./js/main.js"></script>
</body>
</html>The JPG, used as an overlay, the correct API-key I can't include. Could get me into trouble. Sorry.
My problem is: I make any changes to the code (changing the image-path, changing the coordinates for center / the overlay) and the whole thing stops to keep working.
After making changes: The map stays empty.
What is going on there? What I'm doing wrong?
Especially: What do I have to do to get it working with code-changes?
Upvotes: 0
Views: 297
Answers (1)
Joyson
Reputation: 3040
I removed the key because it was giving an invalid key error. I tried changing the center point and the bounds and the code seems to be working.
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.querySelector('#map'), {
zoom: 9,
center: {lat: 19.2164353, lng: 72.9752852},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(19.212860, 72.969140),
new google.maps.LatLng(19.219644, 72.982938)
);
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'imgs/ground_plan.jpg';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
}
// [END region_initialization]
// [START region_constructor]
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
// Die CSS-property legt die Durchsichtigkeit eines Elementes fest.
// 1.0 => Keine Durchsichtigkeit.
// 0.0 => Vollkommene Durchsichtkeit.
div.style.opacity = '0.5';
// Positive Zahl => Dreht im Uhrzeigersinn.
div.style.transform = 'rotate(17deg)';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
USGSOverlay.prototype.hide = function() {
if (this.div_) {
// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';
}
};
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility === 'hidden') {
this.show();
} else {
this.hide();
}
}
};
google.maps.event.addDomListener(window, 'load', initMap);
var toggleButton = document.querySelector('#toggleOverlay');
var increaseButton = document.querySelector('#increaseOpacity');
var decreaseButton = document.querySelector('#decreaseOpacity');
var opacityDisplay = document.querySelector('#current-opacity');
function updateDisplay() {
opacityDisplay.innerHTML =
parseFloat(overlay.div_.style['opacity']).toFixed(1);
}
function setOpacity(step, limit) {
let currentStyle = overlay.div_.style;
let opacity = parseFloat(currentStyle['opacity']); // currentStyle['opacity'] is a STRING !!
if (opacity !== limit) {
opacity += step // Calculation has to be done ONLY with numbers because STRING + NUMBER results in a string.
currentStyle['opacity'] = opacity; // The number will be converted into a string.
updateDisplay();
if (opacityDisplay.classList.contains('limit-reached')) {
opacityDisplay.classList.remove('limit-reached');
}
} else {
opacityDisplay.classList.add('limit-reached');
}
}
increaseButton.addEventListener('click', function() {
setOpacity(-0.1, 0.0);
});
decreaseButton.addEventListener('click', function() {
setOpacity(0.1, 1.0);
});
toggleButton.addEventListener('click', function() {
let current = overlay.div_.style.visibility;
let that = this;
function setValues(that, visibleVal, newButtonText) {
overlay.div_.style.visibility = visibleVal;
that.textContent = newButtonText;
}
current === 'hidden' ?
setValues(that, 'visible', 'hide overlay') :
setValues(that, 'hidden', 'show overlay');
});
opacityDisplay.addEventListener('load', updateDisplay);html, body {
height: 100%;
margin: 0;
padding: 0; }
body {
background-color: #d9d9d9; }
.wrap {
width: 1000px;
height: 100%;
margin: 0 auto; }
nav {
margin: 5px 10px; }
#map {
height: 100%;
border-radius: 6px;
border: 1px solid black; }
a.default-button {
text-decoration: none; }
#current-opacity, .default-button {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica;
padding: 5px 10px;
color: #4367c5;
border: 3px solid #4367c5;
font-weight: 900;
display: inline-block;
text-align: center;
border-radius: 6px; }
#current-opacity {
width: 50px;
position: relative; }
#current-opacity:after {
content: attr(data-hint);
position: absolute;
display: none;
color: crimson;
left: 80%;
top: 5px;
background-color: white;
padding: 5px 10px;
white-space: nowrap;
border-radius: 20px;
border: 3px solid crimson;
box-shadow: 6px 6px 9px #646464;
z-index: 1000;
font-size: 0.9rem;
transform: rotate(5deg); }
#current-opacity.limit-reached:after {
display: block; }
.default-button {
text-transform: uppercase;
min-width: 150px; }
.default-button:hover {
color: #009e60;
border-color: #009e60; }
.default-button:active {
opacity: 0.6; }<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Werk 1 - Saarbrücken</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="wrap">
<nav class="nav">
<a href="#" class="default-button" id="toggleOverlay">Hide overlay</a>
<a href="#" class="default-button" id="increaseOpacity">Increase opacity</a>
<a href="#" class="default-button" id="decreaseOpacity">Decrease opacity</a>
<div id="current-opacity" data-hint="Limit reached">0.5</div>
</nav>
<div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="./js/main.js"></script>
</body>
</html>Upvotes: 2
Related Questions
- Google Maps API Error with no changes in the page code
- Changing javascript in google maps doesn't update it?
- Google Map Javascript API not working
- Google Maps API requires refresh to work correctly
- Google maps api not working properly
- Something happened to my google map api script
- My Google Maps API based code doesn't work
- Google maps API works when I break then continue, doesn't otherwise
- Google maps javascript issue
- Variable Undefined after jQuery Change