Postingan lainnya
cara mengganti alamat agar menjadi latitude logitude
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<title>Blank Cordova Mobile App Project Template (Lite)</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
/* following two viewport lines are equivalent to the meta viewport statement above, needed for Windows */
/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
@-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
</style>
<script src="cordova.js"></script> <!-- phantom library, needed for Cordova api calls, added during build -->
<script src="js/app.js"></script> <!-- recommended location of your JavaScript code relative to other JS files -->
<script src="xdk/init-dev.js"></script> <!-- normalizes device and document ready events, see README for details -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function calculateRoute(from, to) {
// Center initialized to Naples, Italy
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.84, 14.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
$("#from-link, #to-link").click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf("-"));
navigator.geolocation.getCurrentPosition(function(position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$("#" + addressId).val(results[0].formatted_address);
else
$("#error").append("Unable to retrieve your address<br />");
});
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Calculate your route</h1>
<form id="calculate-route" name="calculate-route" action="#" method="get">
<label for="from">From:</label>
<input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
<a id="from-link" href="#">Get my position</a>
<br />
<label for="to">To:</label>
<select id="to" name="to">
<option value=""-6.5712842,107.7596912"">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<a id="to-link" href="#">Get my position</a>
<br />
<input type="submit" />
<input type="reset" />
</form>
<div id="map"></div>
<p id="error"></p>
</body>
</html>
0
2 Jawaban:
<option value=""-6.5712842,107.7596912"">Chicago</option>
<< ini ka menggunakan coordinat latitude dan logtitude...
0
kalau saya kebalikanya, bagaimana mengkonversi alamat dari latitude, longitude ke address, udah nyoba yang dari website google developer tapi Geocoder failed due to: REQUEST_DENIED padahal saya sudah memasukan API_KEY dan sudah mengupgrade akun GCP Saya dan saya juga sudah mengaktifkan API Google Maps, geolocation di Akun GCP tapi tetep request denied <pre> <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Reverse Geocoding</title> <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; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; width: 350px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #latlng { width: 225px; } </style> </head> <body> <div id="floating-panel"> <script type="text/javascript"> function showPosition() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var positionInfo = position.coords.latitude + "," + position.coords.longitude;
console.log(positionInfo);
document.cookie = "lat="+ lat;
document.cookie = "long="+ long;
document.cookie = "position="+ positionInfo +60;
});
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
showPosition();
&lt;/script&gt;
&lt;input id="latlng" type="text" value="&lt;?php echo $_COOKIE['position']; ?&gt;"&gt;
&lt;input id="submit" type="button" value="Reverse Geocode"&gt;
&lt;/div&gt;
&lt;div id="map"&gt;&lt;/div&gt;
&lt;script&gt;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: &lt;?php echo $_COOKIE['lat']; ?&gt;, lng: &lt;?php echo $_COOKIE['long']; ?&gt;}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
console.log(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
&lt;/script&gt;
&lt;script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"&gt;
&lt;/script&gt;
</body> </html> </pre>
0
