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
Related
I am trying to change the width and height of the map. I want to show the map on full width of the page. Map is visible on half of the page without any styles. but when i try to implement styles to change height the map disappears from the page.
here is the full code of my html with the styles in the head tag and map div is at the bottom.
<html ng-app="myApp">
<head>
<!-- Style Sheets includes -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/customstyle.css" rel="stylesheet" type="text/css">
<!-- Script includes -->
<script data-require="angular.js#*" data-semver="1.3.14" src="js/angular.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.js"></script>
<script src="app.js"></script>
<script src="initmap.js"></script>
<style>
html, body, #map {
width: 25%;
height: 25%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
</style>
</head>
<body ng-controller="ApplicationController as appctrl">
<div class="container">
<div id="map"></div>
</div>
Here is the function for Initialize map
//Initializes the map.
function initialize() {
// Initial options. Centers on Sierra Leone.
var mapOptions = {
center: { lat: 8.4494988, lng: -11.7868289},
zoom: 8
};
// Creates the map.
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Then you change the size of the map div you need to resize the map (resize event of google maps) for a correct view of the content
In your case after change dinamically the size of div you can easily (re) invoke your initialize function...
(better if you before set map to null)
You can embed a basic map, a Street View image, driving directions, or a search into your website or blog from Google Maps.
When your viewers are signed in to Google, they can also see their home and work, saved places, and more in your map.
Get the code
Open Google Maps
Make sure the map or Street View image you'd like to embed shows up on the map.
In the top left corner, click the main menu .
Click Share or embed map.
At the top of the box that appears, choose the Embed map tab.
Choose the size you want, then copy the code and paste it into the source code of your website or blog.
Note: If you're using Maps in Lite mode, you won't be able to embed a map.
I'm trying to get google maps to display on a jquery mobile page.
The map works fine if I type I go directly to the page in the browser. However, when I click a link on another jqm page that goes to the map page, I just get a blank grey screen. The markers are actually there but they are plotted off the viewable area above and to the left of the viewport. Also weird is that I am able to drag on the canvas and bring the markers into view in a small, invisible viewport in the upper left hand corner (probably about 100 px wide and 200 px high), but I can't see the actual map.
Here's a screenshot: https://www.dropbox.com/s/p8berda8dbf6kh4/Screenshot%202015-05-25%2014.24.15.png?dl=0
If I immediately refresh the page after the failed load, everything shows up fine. So I don't think this is an API issue.
And one other oddity. If I wait like 10 min, the map will load properly when I click on the link to view the map. But then the next time I try it fails to load. I have to wait several minutes.
My code is basically ripped right from the jquery mobile site. Here's the relevant code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_KEY"></script>
<!-- JQM and other scripts loaded here -->
<script>
$( document ).on( "pagecreate", "#map", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);
drawMap(defaultLatLng);
function drawMap(latlng) {
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
new google.maps.Marker({
position: latlng,
map: map,
title: "lat",
});
new google.maps.Marker({
position: new google.maps.LatLng(43.150358,-74.768798),
map: map,
title: 'hello',
});
}
});
</script>
<style>
#map, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
</head>
<body>
#calling page
<div data-role="page" data-dom-cache="true" id="doors" data-url="doors" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 559px;">
<div role="main" class="ui-content" id="">
View map
</div>
</div>
#map page
<div data-role="page" id="map" data-url="map" style="position: relative;">
<div data-role="header" data-theme="a"><h1>Maps</h1></div><div role="main" class="ui-content" id="map-canvas">
</div>
</div>
</body>
</html>
Well, after hours of banging my head against a wall I finally got it working by changing from pagecreate to pageshow. Interestingly pageshow is deprecated in v. 1.4.5 and is supposed to be replaced by pagecontainershow but pagecontainershow does not work.
And as usual, I find the answer within minutes of posting the question.
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.
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