How can I load map with my current address by using google map api
Question
I have tried to load google map with my current location by using google maps api in JavaScript. I have tried this code by using JavaScript but it does not work. After I tried many ways I come to this code and it works perfect. This code will return Philadelphia as my current location but I want it to return my home address as my current location My Google Map App
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places&key=YOUR_API">
</script>
<script>
var x = document.getElementById("map");
var map;
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var center = new google.maps.LatLng(latitude,longitude);
var myOptions = {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
// Create a marker and set its position.
var marker = new google.maps.Marker({
map: map,
position: center,
title: 'You are here'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function comple()
{
var org = document.getElementById('org');
var des = document.getElementById('des');
var autocomplete = new google.maps.places.Autocomplete(org);
var autocomplete2 = new google.maps.places.Autocomplete(des);
}
google.maps.event.addDomListener(window, 'load', comple);
</script>
</head>
<body onload="getLocation()">
<p><h1>Car Direction Finder</h1></p>
<br>
<form name="form1" id="form1" action="Direction.php" method="post">
<p>
Source:
<input type="text" name="org" id="org" placeholder="Enter Original Source" size="50" autocomplete="on">
Destination:
<input type="text" name="des" id="des" placeholder="Enter Destination Source" size="50" autocomplete="on">
<label for="des"></label>
<input type="submit" value="GO"/>
<br>
</form>
<div align="center">
<table border="2" width="750" height="550" align="center">
<tr>
<td id="map"></td>
</tr>
</table>
</div>
</body>
</html>
Can someone help me with that??
1 answers
solution1
0 2016-04-07 08:15:06
Try this can help you:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions?hl=fr
don't put &key=IPutMyKeyHere if you don't have API KEY.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.