Jump to content
Larry Ullman's Book Forums

Js To Open Document In 100%


Recommended Posts

I am trying to incorporate a Google map in my website. From https://developers.g...cript/examples/ I have made my map and this code gives me a full screen map.

 

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }	  
</style>

 

I can not get markers to work in this so am using from http://www.sitepoint...maps-api-jquery something that works with my markers.. but only in a window. It seems the code for this comes from marker.js and while I can change the pixal size I can not go 100%

 

$("#map").css({
	height: 768,
	width: 1024
});

 

While searching on how to do this (make it 100%) I came accross this forum and hope someone here can help. How can I make my map open at 100% of my browser window?

 

Thank you for your time.

Link to comment
Share on other sites

Like the code in the Google Maps example, perhaps you need to set the html and body element heights to 100% as well.

I do apologize, as I have not tested this myself, but here's the code I got from the simple map example on the Google Maps API page:

 

<!DOCTYPE html>
<html>
 <head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map_canvas {
	margin: 0;
	padding: 0;
	height: 100%;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  var map;
  function initialize() {
	var mapOptions = {
	  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'),
		mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
 <body>
<div id="map_canvas"></div>
 </body>
</html>

 

Notice that the margins, padding and height are all set universally for the html, body and #map_canvas elements. That's probably the key.

Perhaps the following page will also be of assistance:

 

http://nicholasbarge...so-much-easier/

 

If you're still having trouble, please let us know, and I'll take a little more time to look into the issue.

 

Edit: As an added note, it looks like adding markers is pretty simple with the Google Maps API. Check out the marker-simple example under Overlays on the Google Maps API page you linked to. The code seems to require a single method call with a simple object passed to it as an argument. That might be a more simple solution than having to include another outside JS library to solve the problem.

  • Upvote 1
Link to comment
Share on other sites

Thank you HartleySan.

 

I have tried your ideas and also those in the link. Unfortunately none of the combinations I tried would work for me. When I get a full screen my map does not show. My level of understanding the code is very low and limited to cutting and pasting examples. Your solution may well work except that I may be placing it in the wrong spot or missing a simple bracket.

 

I was hoping for a simple replacement of the initial *.js code however it appears that this may not be easy /possible.

 

$("#map").css({
			height: 768,
			width: 1024
	});

 

I may have to revert to your last solution but the idea of using an *xml file to populate my markers and the fact that the initial map does not show the markers until a button is clicked fits well with my design.

 

I appreciate your help.. again, thank you

Link to comment
Share on other sites

Setting the height of something to 100% can be tricky. Unfortunately, I don't have an answer off the top of my head, and it will require some testing to get one.

If you can be patient, I'll download the code you're using later and try to figure it out.

 

Just as a general pointer though, if your understanding of JS is that low, it would behoove you to study up on JS and jQuery more, and then implement the solution I recommended, which is to not use the JS library provided by that Indian site at all. What you want to do isn't that hard. It's simply a matter of setting up an onclick event handler for the markers as well as using Ajax to return the XML document as XML, at which point, you can easily scan through the document using DOM methods.

Link to comment
Share on other sites

Thank you

I would appreciate it if you could but I think you are right about me picking a different example to modify / use. Except for the size issue it all works so I am reluctant to start over... If it is a lot of work /time on your part just leave it and I will reconsider my options. I was hoping for a quick and easy solution... it seems not.

 

I have found similar questions on how to change this very sample and none with a solution.

Link to comment
Share on other sites

Before I answer this question, I should clarify something: Do you want the map to take up 100% of the viewable window (and automatically resize when the browser window is resized), or do you want the map to take up 100% of the total client size (even if that is more than the total height of the viewable browser window)?

Link to comment
Share on other sites

I want as much map showing as I can. So I want it to be full screen in what ever size the window is. I will need some (10px?) for the Show Marker Tab which in the sample is below the map, This could be moved onto the map if it was possible (under the current map style Map, Satellite?) and save the space for more map.

 

I appreciate you taking this project on.. Thank you

Link to comment
Share on other sites

The simplest solution is to use document.body.clientHeight to get the total height of the entire page (and not just the height of the window), and then subtract however many pixels you need for the markers at the bottom.

For example, you could set the height of a map object in a div with the ID "map" as follows:

 

document.getElementById('map').style.height = document.body.clientHeight - 10 + 'px';

 

That would give you a 10-pixel buffer below the map, regardless of the height of the page.

That answer your question?

Link to comment
Share on other sites

Darn.. Because I had adjusted the pixel size of my JS code to match a full screen when I inserted your example code I thought it worked. Either I am putting your example / fix in the wrong spot or the code in the markers JS is overriding your solution. May I ask specifically where you would insert your example code and what do I do with the code in the markers.js.

$("#map").css({
	height: 500,
	width: 600
});

Sample code from http://www.sitepoint...aps-api-jquery/

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/markers.js">

</script>
</head>
<body><div id="map"></div>
<div ><input type="button" id="showmarkers" value="Show Markers" /></div>
</body>
</html>

markers.js

$(document).ready(function() {
 $("#map").css({
	height: 500,
	width: 600
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
 MYMAP.init('#map', myLatLng, 11);

 $("#showmarkers").click(function(e){
	MYMAP.placeMarkers('markers.xml');
 });
});

var MYMAP = {
 map: null,
bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
 var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
	$(xml).find("marker").each(function(){
		var name = $(this).find('name').text();
		var address = $(this).find('address').text();

		// create a new LatLng point for the marker
		var lat = $(this).find('lat').text();
		var lng = $(this).find('lng').text();
		var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

		// extend the bounds to include the new point
		MYMAP.bounds.extend(point);

		var marker = new google.maps.Marker({
			position: point,
			map: MYMAP.map
		});

		var infoWindow = new google.maps.InfoWindow();
		var html='<strong>'+name+'</strong.><br />'+address;
		google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(html);
			infoWindow.open(MYMAP.map, marker);
		});
		MYMAP.map.fitBounds(MYMAP.bounds);
	});
});
}

Link to comment
Share on other sites

This code opens a map in a window of 500 x 600. As I do not know what size / shape of window my user has in his/her browser I can not guess with a predefined number without having either too small or too large a map, I know it will open with both vertical or horizontal scroll bars but want to avoid those.

I want my map to be 100% of the available window. If my user has his browser set at full screen or minimized when he opens my map it will cover the entire page / window of his browser

Link to comment
Share on other sites

This CSS inside a stylesheet/style element on the page, should give you the largest map possible. It will fill the screen vertically, but only about 70-80% horizontally. (At least at my setup) It might have something to do with your input element. I don't know.

 

 
#map {
   display: block;
   min-width: 100%; width: 100%;
   min-height: 100%; height: 100%;
}

Link to comment
Share on other sites

Okay, I think I understand the problem and what you want now. I misunderstood before.

Anyway, Antonio makes some good points. To add to that, I think the following article gives you what you want:

http://www.howtocrea...t/browserwindow

 

Please read it carefully and make sure you understand everything it says.

Based off that article, I modified your code as follows, which seems to be what you want:

 

 

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style>

html, body, #map {

 margin: 0;

 padding: 0;

 width: 100%;

}

</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="markers.js">

</script>
</head>
<body><div id="map"></div>
<div ><input type="button" id="showmarkers" value="Show Markers" /></div>
</body>
</html>

 

Notice the addition of the style element with the CSS definition for the html, body and #map elements. It's good practice to default all margins and padding to 0.

Also, since the "Show Markers" button below the map won't affect the width, you might as well just set the width of the map to 100% here and be done with it. There's no need for fancy JS tricks to handle the width.

 

Now, for the height, I modified your markers.js file as follows:

 

 

$(document).ready(function() {

 var winHeight;

 if (typeof window.innerWidth === 'number') {

winHeight = window.innerHeight;

 } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

winHeight = document.documentElement.clientHeight;

 } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

winHeight = document.body.clientHeight;

 }

 $("#map").css({
			height: winHeight - 40
	});
	var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
 MYMAP.init('#map', myLatLng, 11);

 $("#showmarkers").click(function(e){
			MYMAP.placeMarkers('markers.xml');
 });
});

var MYMAP = {
 map: null,
	bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
 var myOptions = {
	zoom:zoom,
	center: latLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
	$.get(filename, function(xml){
			$(xml).find("marker").each(function(){
					var name = $(this).find('name').text();
					var address = $(this).find('address').text();

					// create a new LatLng point for the marker
					var lat = $(this).find('lat').text();
					var lng = $(this).find('lng').text();
					var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

					// extend the bounds to include the new point
					MYMAP.bounds.extend(point);

					var marker = new google.maps.Marker({
							position: point,
							map: MYMAP.map
					});

					var infoWindow = new google.maps.InfoWindow();
					var html='<strong>'+name+'</strong.><br />'+address;
					google.maps.event.addListener(marker, 'click', function() {
							infoWindow.setContent(html);
							infoWindow.open(MYMAP.map, marker);
					});
					MYMAP.map.fitBounds(MYMAP.bounds);
			});
	});
}

 

Basically, I edited the top part of the anonymous function within the ready method. Using the code provided on the page I linked above, I added the necessary code to get the proper height in all browsers. I then subtracted 40 (pixels) from that to account for the button. You're welcome to modify that "40" value to whatever floats your boat. Note that since we already defined the #map element width in the CSS in the HTML file, there's no need to do it again in the css method, so I removed it from the JS.

 

Hopefully this is what you wanted.

Please let us know.

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...