I wish to make a tag's height and width to 100%, now in other examples it worked using tag demonstrated below. But in the code given below, if I remove the "style="width: 370px; height: 505px"" from the and add the following code after meta tag
<style type="text/css>
body{
height:100%;
width:100%;
}
#map-canvas{
height:100%;
width:100%;
}
</style>
it doesn't work.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var shape;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
shape = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = shape.getPath();
vertices.push(e.latLng);
}
function clearmap(){
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas" style="width: 370px; height: 505px"></div>
<input type="button" value="click" onclick="clearmap"()>
</body>
I made a jsfiddle out of your code
http://jsfiddle.net/jRwDs/3/
...and the answer from Rohit Azad, to add the html tag to the document style, seems to fix your problem (at least on jsfiddle).
Related
For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
}
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=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</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>
</head>
<body>
If someone have a piece of code working on his computer, or find an error on mine i would be very happy.
Thanks.
The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script scr="jquery.js></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&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"></div>
</body>
</html>
Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!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" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.
I am new to HTML5. I am not able to drag and drop inside eclipse. This function is working in browser.
Please some one help me. Thanks in Advance.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="ic_launcher.png" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
google map v3 is not fully displayed in html5, phonegap.
This map is drag-able, here is JavaScript code(main.js)
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
initialize();
and here is my html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/jquery.mobile.css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/tabs.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</head>
<body>
<div id="page-id" data-role="page" >
<div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div> </div>
</div>
</body>
</html>
css
#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_canvas {
width: 600px;
height: 400px;
}
Please suggest me solution where is the problem if I inspect it in firebug it loads completely and show a complete map in div.
We had the same problem and we solved it by setting "max-width: none" on the map . But I don't remember why. :(
Looking at your screenshot it seems that the mapcontrol takes up the desired space but the actual map-area isn't large enough. Try to move your call to initialize(); so that it executes when the rest of the page has loaded and see if it helps.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
$(document).ready(function() {
initialize();
});
Another solution might be to call the resize event and have the map control remeasure itself after everything has loaded, that is done by calling google.maps.event.trigger(map, "resize"); (and call initialize() outside of the ready-function as before).
$(document).ready(function() {
google.maps.event.trigger(map, "resize");
});
Pls check the following :
<div id="mapa" style="width: 350px; height: 350px"></div>
Above is the div for map to be listed.
var map = new google.maps.Map(
document.getElementById('mapa'), {
center: new google.maps.LatLng(9.295680287227711, 76.87921151518822),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I tried all the above wont work any so had done a trick like this which give desired result.
I write a mouse over function and call the below code
(1) Modify
<div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div>
(2)
function show_sidebar(){
google.maps.event.trigger(map, 'resize');
}
I've had this issue in the past and posted my solution to a similar question.
The following fixed it:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Waiting for the map's idle state (i.e. it's finished loading itself) and then telling it to resize itself.
I am using the following code to display an HTML page in a webview:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.socialmedia
);
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/www/facebook.html");
And the HTML page:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="container"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" ></script>
<fb:like-box href="http://www.facebook.com/workatcareerbuilder" width="292" show_faces="true" stream="true" header="true" hScrollbar:true></fb:like-box>
<!-- <script>
function twitter(){
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
title: '#palafo',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('imomentous').start();
}
</script> -->
</body>
</html>
But it shows nothing on screen. Please help. I have kept Internet permission also.
I found this logcat message:
06-28 06:33:50.510: INFO/GATE(20523): <GATE-M>DEV_ACTION_COMPLETED</GATE-M>
Thanks.
I think it may be that WebView doesn't, by default, allow javascript to execute. If that's the case then you only need to enable javascript:
webview.getSettings().setJavaScriptEnabled(true);