Using web browser Chrome on my laptop, I opened a local html web page to get the current location. The returned location (1.3238272, 103.8606336) is no where close to my actual location. Similarity, websites like [1] (1.3238272
103.8606336) [2] (1.32383, 103.86063) all return not accurate results.
However, using google map, it returned (1.287264, 103.831497) a much accurate location. Do google map use a different approach/technology to obtain a location?
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var g_lat = 0;
var g_lng = 0;
var map, infoWindow;
function initMap() {
navigator.geolocation.getCurrentPosition(updatePosition);
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: g_lat, lng: g_lng},
zoom: 8
});
infoWindow = new google.maps.InfoWindow;
}
function updatePosition(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
The mistake is using Google Map when user logged in, this will produce a better location result. Without logging in, resulting location is the same as geolocation.
Related
I want to load a KML file with the API provided by GoogleMaps, but can't make it work.
I have a KML file that works correctly and displays all the points when loaded manually from my computer to GoogleMaps. However, when I try to do it with the API, it doesn't work. I uploaded my file to Google drive and I am using the example provided by Google (I only change coordinates, file and API key).
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.45, lng: -3.8}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
georssLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
});
georssLayer.setMap(map);
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
The link to Google Drive you are using does not provide the raw KML.
If I check the status of the KmlLayer after it loads, I get INVALID_DOCUMENT (fiddle, check the javascript console)
Per the article: Direct linking to your files on Dropbox, Google Drive and OneDrive:
Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:
https://drive.google.com/file/d/FILE_ID/edit?usp=sharing
Becomes:
https://drive.google.com/uc?export=download&id=FILE_ID
In your case:
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
becomes:
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
google.maps.event.addListener(georssLayer, 'status_changed', function() {
console.log(georssLayer.getStatus());
})
georssLayer.setMap(map);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I need do embed a kml google earth map in my webpage.
I followed this instructions, but the link to get the code to embed doesn't seem to be activated here.
I also tryed the followning code, but it shows a simple map without the informatons in the kml file
<head>
<title></title>
<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 }
#google-map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'poligono1.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="google-map" class="google-map"></div>
</body>
i put the kml file in the same folder of the webpage.
Thanks in advance for helping me!!!
i tried the scaisEdge code, and it works fine.
but in iis were missing the mime type, then i added the mime type, and now it works fine... thanks geocodezip!!!
I think this sample from google developer could be useful
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
/**
* #fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* #param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
I am traveling globally and need to insert a Google map on my web page that shows my current position (not the position of the reader) so that others can see where I am.
Does anyone have a straightforward solution to do this. I know how to use My Places to create maps and insert in my pages, but have avoided having to get involved in using the Maps API so far. I have some knowledge of HTML and Javascript, but it is minimal so would rather avoid this if I can.
Does anyone have a solution to this?
Further to my answer over at your other question you may find bits of this example useful: - hypoCampus
The little blue man/person/icon follows your location. If you scroll the maps away you can then press the static blue map-control man to re-center on your location. When you're moving (throttled location update is changing) the icon is walking otherwise it is standing.
(There's a bug with Manifest - "display" : "standalone" at the mo Chrome bug)
Hopefully Firebase have committed to bypassing the speed-humps of W3C/IETF and will give us ServiceWorker Background Geolocation tracking very soon.
you must tell to map your current location. for that you must get your location Latitude and Longitude for show that by maps.
get that by :
http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false
try this html code in your page. str_lat and str_lng are your location :
<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=YOUR_API_KEY&sensor=false>
</script>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(str_lat,str_lng);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:'Location!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas'/>
</body>
</html>;
See Here https://developers.google.com/maps/documentation/javascript/tutorial
and see this code for judging your skills don't worry about new terms they are explained in the link above
<!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=API_KEY&sensor=SET_TO_TRUE_OR_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>
I have made some code to plot basic markers on a google map selectable via a dropdown.
however : I'd like to have two drop downs with the same options in them, and only display the markers selected in the dropdown (i.e. have 100+ markers but only show 2). Id also like to 'draw a line' in-between the two points and have a pop up window (as per google maps does) when hovering over the location. Lastly, can the window resize to the markers?
Here's what I've got so far:
<!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: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Here you can specify all list of your geolocation options
window.markers = {
'Moscow': {lat: 55.74257, lng: 37.61547},
'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
};
// This is a initialization of map and set of all markers
function initialize() {
var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i in window.markers){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
map: map
});
}
}
// This is a handler for dropdown change
function mychange(element){
var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
map.setCenter(city);
return false;
}
</script>
</head>
<body onload="initialize()">
// This is your dropdown
<select onchange='mychange(this)'>
<option value='Moscow'>Moscow
<option value='Saint Petersburg'>Saint Petersburg
</select>
// This DIV for you map
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I want to make a web application that will get 2 location and their postalcode and show the result on google map. For example, I select 2 cities or a country and show the road map with a colored line according to my points.
Best place to look is the Google Maps API V3 Documentation - I recommend V3 as they don't support V2 anymore
Main documentation: http://code.google.com/apis/maps/documentation/javascript/
Samples: http://code.google.com/apis/maps/documentation/javascript/examples/index.html
Simple directions sample: http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html
Basically you need to have the two co-ordinates, although you can use street addresses, and pass that to the API and it goes off to google gets the results and then plots it. Easy as pie!
Save this code as location.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="map.css" rel="stylesheet" type="text/css">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var siberia = new google.maps.LatLng(37.625364,-122.423905);
function initialize() {
var myOptions = {
zoom:19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
map: map,
position: siberia,
content: 'Location found using HTML5.'
});
var marker = new google.maps.Marker({
position: siberia,
map: map,
title: "omt"
});
map.setCenter(siberia);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Save this code as map.css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}