i want to work with google maps offline for my mobile application
i used html 5 and google maps to development my app
but some user needs use app offline
so i want to use appcache manifest
but it works for normal page that contains just js+css but does not
work for google maps
because google maps included that file and this is dynamic file
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false
what should i do?
i made appCache as a below
cache.appcache file
CACHE MANIFEST
/index.html
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
http://csi.gstatic.com/
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false/
http://mt0.google.com/
http://mt1.google.com/
http://mt2.google.com/
http://mt3.google.com/
http://maps.google.com/
http://maps.gstatic.com/
And then i made a html page that shows google maps
as a below
index.Html
<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
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>
But it does not work offline
you can see demo URL here
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
I've been trying to develop a UWP App, which uses Google maps API. So, I have created 2 projects -
1) a XAML UWP project
2) a JS UWP project
When I run both, the map is visible in the JS project, but not in the XAML one. The page only shows "Content goes here.", and a blank space below it in the XAML app. I have followed the documentation given in the website.
The XAML App output
The JS App output
Here is the html -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<!-- mapframe references -->
<link href="/map.css" rel="stylesheet" />
<script src="/map.js"></script>
</head>
<body>
<div>Content goes here.</div>
<div id="mapwindow"></div>
</body>
</html>
And the js is as follows -
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapdisplay'), {
zoom: 3,
center: new google.maps.LatLng(40, -187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
google.maps.event.addDomListener(window, 'load', initialize);
And the CSS is -
html, body, #mapwindow {
margin: 0;
padding: 0;
height: 100%;
}
Thanks in advance!
I'm using Google Maps API v3, and the map language is set according to user's browser locale.
Is there a way to change this setting and force map to load in US English?
There is this, but it changes the region language, i.e. street names etc., I also want to control the map buttons and the interface language.
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
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>
And you can load map in any specific language by passing the value of language code parameter with in this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
Some example language codes are given here:
pass en for load map into english similarly ja for Japanese and
fr for French
I hope this is what you are asking for.
for more info click here
Happy coding!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&language=sa"></script>
i am using languague of saudi arabia
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.
As of...today, it seems, Google Maps no longer has embed code!
Can someone point me in the right direction, or maybe offer up some old embed code I could try to embed into something useful?
Here is the article explaining how to embed a Google Map:
http://maps.google.com/help/maps/getmaps/quick.html
I think this has to do with the Google+ Social Network "thing" that appeared in the last few days.
Also, I have tried the instructions in the link above both logged into a Google Apps account and not logged in to any Google account.
I just tried the embed code and it seems to be working correctly for me. Did you change anything on your page recently? Here is what I tried.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319&output=embed"></iframe><br /><small><a
href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319" style="color:#0000FF;text-align:left">View Larger Map</a></small>
Try disabling your Maps Labs in order to use map embedding. - reference
http://maps.google.com - the embed box is now back.
I guess it was a temporary glitch. I am pretty sure it was not on my side, I tried a few different machines and browsers.
Google maps has shifted settings link from bottom right to top left, left side of search bar
Here is the code to add Google Maps to your webpage. No API key needed.
<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?&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(54.584063, -5.928343),
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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BLAAAAAAAAAAAAAAAAAAA</title>
<link rel="stylesheet" href="style.css">
<body>
<div id = "map-canvas"/>
</body>