Skip to content

Instantly share code, notes, and snippets.

@ozknozsrt

ozknozsrt/index.html

Created October 6, 2016 08:04
Show Gist options
  • Save ozknozsrt/18351e9c44cefbb04d5eebb4a37e7f6a to your computer and use it in GitHub Desktop.
Save ozknozsrt/18351e9c44cefbb04d5eebb4a37e7f6a to your computer and use it in GitHub Desktop.
Download ZIP
Google Map Directions Api (Yol Tarifi)
Raw
index.html
http://www.dijitalders.com/rs/ic/google_map_30_ile_directions_yol_tarifi_kullanimi__4708_0.png
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var directionsService;
var directionsRenderer;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-33.868011, 151207566)
});
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById('directions'));
directionsService = new google.maps.DirectionsService();
Form=document.forms['harita'];
YolTarifi(Form.elements['nerden'].value, Form.elements['nereye'].value);
}
function YolTarifi(Nerden, Nereye) {
var request = {
origin: Nerden,
destination: Nereye,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
} else {
alert('Yol Tarifi Oluşturulamadı');
}
});
}
</script>
</head>
<body onload="initialize()">
<form name="harita" action="#">
<table>
<tr><th align="right">Nerden :</th>
<td><input type="text" size="25" name="nerden" value="mersin" /></td>
<th align="right">Nereye</th>
<td align="right"><input type="text" size="25" name="nereye" value="malatya" /></td>
<th>
<input name="submit" type="button" value="Yol Haritasını Göster" onclick="YolTarifi(document.forms['harita'].elements['nerden'].value, document.forms['harita'].elements['nereye'].value)" />
</th>
</tr>
</table>
</form>
<br/>
<table class="directions">
<tr>
<td valign="top"><div id="directions" style="width: 275px"></div></td>
<td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
</tr>
</table>
</body>
</html>
Raw
javascript
var map;
var directionsService;
var directionsRenderer;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-33.868011, 151207566)
});
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById('directions'));
directionsService = new google.maps.DirectionsService();
Form=document.forms['harita'];
YolTarifi(Form.elements['nerden'].value, Form.elements['nereye'].value);
}
function YolTarifi(Nerden, Nereye) {
var request = {
origin: Nerden,
destination: Nereye,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
} else {
alert('Yol Tarifi Oluşturulamadı');
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment