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;
}
}
Related
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.
I have a KML file I'm using google sites to host. The link is working in my code, because I can see the map as an overlay. But when I put any style in the KML, the page seem to ignore it. I tried to change it to yellow, but I only get the default blue. The KML has polygons with inner and outer boundaries. The code is being views in my editor (Coda 2). The map shows, and it's in the right place, but it's not the right color. Is there a way for me to change the color? see code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Coverage Map</title>
<style>
html, body, #map-canvas {
height: 80%;
width: 80%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var chicago = new google.maps.LatLng(37.09024, -95.712891);
var mapOptions = {
zoom: 5,
center: chicago,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/dmckmls/home/kml/Sprint.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Any ideas?
I changed the name of the file. I read about that somewhere as well for the change. That's rather annoying on google's parts. Such a powerful tool and they can't update the file because they have to cache it for performance sake. Thanks everyone for the help.
I'd like to display a perspective view of a satellite map.
I used sample code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>45° imagery</title>
<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 = {
center: new google.maps.LatLng(36.964645, -122.01523),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setTilt(45);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
If I change the coordinates of the map for this one: 47.566188, -0.610760, I get several 404 not found which may mean that the perspective view is not avalaible, while it's avalaible in the maps application.
Could you have a explanation of my problem, and eventually a way to solve it?
I have no idea why 45° imagery would be available on Google Maps and not in the API. I have tried with the v3 of the API (not v3.exp) and the same happens for these coords.
But if you want to avoid trying to load unavailable tiles and the 404 errors, you can do a very simple check:
if (map.getTilt()) {
map.setTilt(45);
}
JSFiddle demo
I try to make the tutorial work that geoserver has in its documentation:
http://docs.geoserver.org/stable/en/user/tutorials/georss/georss.html
Since Google maps v2 is deprecated and its keys with it I obtained a v3 API-key via the Google web console and put it in that like this:
<script src="http://maps.google.com/maps?file=api&v=3.x&key=[my key for v3 here]" type="text/javascript"></script>
It shows the map as expected but after a few seconds I get:
Google has disabled use of the Maps API for this application.
and the map is gone.
Could it be, that this tutorial is just severely outdated? So do I need to find a tutorial on using geoserver with Google Maps v3 ?
The way to display RSS layers in the Google Maps API v3 is to use KmlLayer
Example from the referenced documentation:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<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>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338#N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</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>