This seems like such a silly problem, but it has me baffled...
I have broken my page down into the simplest elements and the problem is still occurring.
I have a page with a google map inside a div. When printing the map, there is a small section towards the bottom that prints empty. I have absolutely no idea how to rectify this.
The issue is already evident in the print preview.
Here is a screen shot: http://tinypic.com/r/e7xqb9/8
The page is intended to print on an A4 page and is designed to fit the page with no resizing neccessary.
This seems to be happening across Chrome, IE, Firefox and Safari browsers.
Any suggestions would be greatly appreciated !!
<html>
<body>
<form id="form1">
<div id="map_canvas" style="width:620px;height:620px;"></div>
</form>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script>
// Variable Declarations
var map;
// function initializes Google map
function initialize() {
var mapCenter = new google.maps.LatLng(-30.732393, 24.125977); //Google map Coordinates
var googleMapOptions =
{
center: mapCenter, // map center
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl: false,
zoomControl: false,
panControl: false,
mapTypeControl: false,
zoom: 5
};
map = new google.maps.Map(document.getElementById("map_canvas"), googleMapOptions);
}
initialize();
</script>
</body>
</html>
After testing your code again it actually happens when trying to print in landscape mode only which you did not mention in your question.
Solution: adapt the height of your map container so that it fits onto A4 paper in landscape mode.
Related
I'm doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.
Hi i've been attempting to load Googlemaps onto the page when the user clicks on the link. I've been attempting to follow Using google maps with angularjs and angular ui but the map doesn't appear. On localhost, the error i get is: no module:map testing. What does no module here imply? I keep running into such errors. It works on JSfiddle for some reason...The working example.
Html file:
<div ng-app='maptesting'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
<!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
</div>
</div>
The javascript file:
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(13.0810, 80.2740);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
Live example:
On plunker: here
On JSfiddle: here.
On another note, would it be better to code the google maps and angularjs integration using angularui, from scratch or using google maps with angular? The anuglarui one looks great but when i tried it it didn't work too. I read in a google circle that it wasn't updated for a while which could be why it isn't working well.
Answer:
Yep all I was missing were the script tags. Namely:
<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Your Plunk doesn't have <script></script> elements for ui.map or ui.event. For example, you might want to include these in your <head>:
<script src="ui-event.js"></script>
<script src="ui-map.js"></script>
I have a fairly straightforward Google Maps implementation running well in Chrome on a Mac. Yet - I am not working on the mobile implementation as well as cross-browser fixes, and have discovered that the map itself is not properly displaying / functioning, let alone the markers and infowindows that should be showing up. The native zoom tool never displays and I can't click anywhere on the map or drag it.
I've been googling and googling but not turning much up. Any hints or help would be much appreciated (while realizing this is not specifically a code question - yet).
I discovered the prob on my own app, but tested using Google's 'hello world' for the maps API, and it's exactly the same issue:
<!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: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSh0tsHL1DQBwI0-xfuQkUezonGxlt39k&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Your map doesn't have a completely defined size. You need to specify both the height and width, either as percent up to a parent element that has a size or specifically define the size of the div. If the size isn't defined it is zero.
I'm developing a web app for an HP Compaq L2105tm touch screen on a windows 7 box. When I bring up maps.google.com in Chrome the map works just fine with pinch zooming and other touch events you'd expect from a touch screen. However, when I use the following code to do a basic google map embed, the touch events do not work as expected. (Pinch zoom does not work.)
<!doctype html>
<html lang="en">
<head>
<style>
html, body, div#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
(function() {
var div = document.getElementById('map');
var lat = -36.5;
var lng = 150.5;
var options = {
center: new google.maps.LatLng( lat, lng ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
var map = new google.maps.Map( div, options );
})();
</script>
</body>
</html>
My question is why does maps.google.com work with pinch zoom and my map not work with pinch zoom in the exact same browser/touch environment?
UPDATE
This issue was handled in the bug
https://issuetracker.google.com/issues/35824421
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
I have the same problem and actually spoke with someone on the Google Maps Api team and they are aware of the issue. Unfortunately, there is no timetable for when it will be addressed. So I guess you can take solace in knowing that they know it is an issue.
Seems like the new api addresses this
https://developers.google.com/maps/documentation/javascript/basics#Mobile
Using the following barebones code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map_area" style="width:100%;padding-bottom:100%;"></div>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCfoIZz72NPrAPegHrWxqZtvzGkTASDXMc&sensor=false'></script>
<script type="text/javascript">
var center = new google.maps.LatLng(38.504806, -122.470542);
var mapOptions = {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_area"), mapOptions);
</script>
</body>
</html>
Example available at http://test.wcwddemo.com.
At larger (e.g. desktop) viewport sizes, it works as expected, centering a map on the small California town of St. Helena.
If you shrink the size of the viewport and refresh the screen, at some point (around a width of 625px), the map is no longer centered on the town. Instead, the town seems to be centered on the lower boundary of the map container.
On the surface, this appears to be a bug. Am I missing something? Is there a workaround?
You must set a height-style for map_area.
From the docs: you must always set a size on that <div> explicitly