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.
Related
I am developing my application for Android Environment using IBM Worklight and the following Library: http://storelocator.googlecode.com/git/index.html
Whenever I enter any location from the textbox, I am getting the world map, not the location which I entered. I need to zoom in to see the exact location. It is working correctly on Worklight Console. But on device, Whenever I enter any city name, I am getting only world map. There is not any error on LogCat.
Also, I am getting two alerts continuously.
"Rate Limit Exceeded"
"The SQL Query is malformed. (there might be something wrong with these URL parameters: select, Where, orderBy, intersects)."
The following is HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testeApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-png-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-svg-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.structure-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.theme-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.external-png-1.4.3.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.3.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/gme.js"></script>
<script type="text/javascript" charset="utf-8" src="js/store-locator.min.js"></script>
<link rel="stylesheet" href="css/storelocator.css">
<script src="js/medicare-static-ds.js" type="text/javascript"></script>
<style type="text/css">
body { font-family: sans-serif; }
#map-canvas, #panel { height: 500px; }
#panel { width: 300px; float: left; margin-right: 10px; }
p.attribution, p.attribution a { color: #666; }
</style>
</head>
<body>
<div data-role="page" >
<div data-role="content">
<div id="panel" class="storelocator-panel" style="width : 100% ; height : 30%; " >
<form class="storelocator-filter" >
<div class="location-search" id="locationSearch" style="height :35%; ">
</div>
<div class="feature-filter">
</div>
</form>
</div>
<div id="map-canvas" >
</div>
</div>
</div>
</body>
The following is the javascript code for the Map.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.67023, -79.38676),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var panelDiv = document.getElementById('panel');
var data = new storeLocator.GMEDataFeed({
tableId: '12421761926155747447-06672618218968397709',
apiKey: 'AIzaSyAtunhRg0VTElV-P7n4Agpm9tYlABQDCAM',
propertiesModifier: function(props) {
var shop = ([props.NAME]);
var locality = join([props.CITY, props.POSTAL_CODE], ', ');
return {
id: props.STORE,
title: props.NAME,
address: join([shop, props.ADDRESS, locality], '<br>'),
};
}
});
var view = new storeLocator.View(map, data, {
geolocation: false
});
new storeLocator.Panel(panelDiv, {
view: view
});
});
function join(arr, sep) {
var parts = [];
for (var i = 0, ii = arr.length; i < ii; i++) {
arr[i] && parts.push(arr[i]);
}
return parts.join(sep);
}
For the zoom issue, to get to street-level zooming, I use zoom: 18.
As for the "rate limit exceeded" warning, this warning is issued by Google Maps and you need to verify your usage of Google Maps: https://developers.google.com/maps/documentation/business/articles/usage_limits
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>
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).
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>