Code:
var dest1 = document.getElementById('textbox1').value;
var request = {
origin:start,
destination:dest1,
travelMode: google.maps.TravelMode[selectedMode]
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay1.setDirections(response);
}
});
I am finding a location using google API and then calculating the distance between the searched place and the particular hotel which is coming from my data base, In image you can see i have searched for route map and distance for "Leela Palace Bengaluru, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India" to my hotel which is coming from data base,as you can see the marker is not exactly pinning on leela palace instead it is showing next to the leela palace that is marked as B in image. I don't know where exactly i have done wrong it would be great if someone can help me with this thank you
Map response
"Leela Palace Bengaluru, HAL Airport Road, ISRO Colony, Bengaluru, Karnataka, India" is a place, not a postal address. When you send that string to the geocoder you get a result for "Leela Palace Rd, HAL 3rd Stage, Bengaluru, Karnataka, India (12.9619947, 77.64936599999999)"
The geocoder is for postal addresses.
The Places API/library is for places.
The distance service uses the geocoder for strings, if you give it a place ID, it will use that for the destination.
Using the place id finder, the place id for "Leela Palace Bengaluru" is:
The Leela Palace Bengaluru
Place ID: ChIJ3ZvKfAYUrjsRGuckzDe-GxE
23, HAL Airport Rd, ISRO Colony, Domlur, Bengaluru, Karnataka 560008, India
You can use that for the destination of the DirectionsService.
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var start = "Jogupalya, Karnataka, India";
var dest1 = {
placeId: "ChIJ3ZvKfAYUrjsRGuckzDe-GxE"
};
var request = {
origin: start,
destination: dest1,
travelMode: google.maps.TravelMode.DRIVING
}
var directionsService = new google.maps.DirectionsService();
var directionsDisplay1 = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true
});
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay1.setDirections(response);
map.setCenter(response.routes[0].legs[0].end_location);
map.setZoom(16);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
Related
I am new to this place and I desperately need help from experts here! D=
I tried to make a page that can generate dynamic numbers of google map. The webpage, however, keep showing Geocode was not successful for the following reason: REQUEST_DENIED.
I double checked my google API console and confirmed that the geocoding API and Javascript API are enabled. (I literally enabled all Google map API in the list...)
My Google Map API List
Can someone please take a look and tell me why? T_T
//------------------------------------------------\\
Below is my javascript and html button:
Javascript:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap"
type="text/javascript"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=mapAddress"
type="text/javascript"></script>
<!-- &callback=mapAddress -->
<script>
function mapAddress(mapElement, address) {
var geocoder = new google.maps.Geocoder();
// alert(mapElement);
// alert(address);
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 17,
center: results[0].geometry.location,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
HTML(Supposed to be php variable):
<button type="button" class="button_mapAPI" id="address_<?php echo $case["id"]; ?>" value="<?= $case['location_detail'] ?>" onclick="mapAddress('map1', 'Hong Kong')"/>Map Refresh</button>
Did you enable the Billing for API Key? Google Maps is no longer free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit they give you monthly for free.
First of all, the problem was loading the scripts as async, remove it..
try that jsfiddle with your API KEY
(function(){
let mapElement = 'map';
let address = 'SPAIN';
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 17,
center: results[0].geometry.location,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
})();
#map {
width: 100%;
height: 350px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script>
<div id="map"></div>
Nead to enable geocoding api that convert address to coordinates and it is a bit pricier, use coordinates instead of address and no need for Geocoding API
Is there a way to request main road Google StreetView panorama data instead of back alley panorama data for a given location (latitude/longitude)?
I'm using the Google Maps Javascript API to retrieve a street view panorama from a home address supplied by our users. It works quite well for most addresses I've tried, but I'm noticing a lot of properties in California also have street views for back alleys, and the API seams to be consistently returning the back alley panorama instead of the main road (front of property) panorama.
I don't want to show the user a back alley panorama of their home, but instead the main road panorama. If I lookup the same address on maps.google.com I see the front of the house, but when I request the same address through the API I get the back alley.
The process I'm currently using is:
Geocode address
Get panorama given the geocode location (lat/long)
Compute heading and display panorama on page
Test Addresses:
325 S Peck Dr, Beverly Hills, CA, USA, 90212
333 S Rodeo Dr, Beverly Hills, CA, USA, 90212
Any ideas or suggestions would be greatly appreciated. Thanks!
Use the directions service to get directions from the desired address to itself. Use that location instead of the geocoder result for the street view location. Use the geocoder result (hopefully a ROOFTOP accuracy result) for the place to look "at".
related question: Facing the targeted building with Google StreetView
Examples:
325 S Peck Dr, Beverly Hills, CA, USA, 90212
333 S Rodeo Dr, Beverly Hills, CA, USA, 90212
code snippet:
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "333 S Rodeo Dr, Beverly Hills, CA, USA, 90212";
var myLatLng;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myLatLng = results[0].geometry.location;
// find a Streetview location on the road
var request = {
origin: address,
destination: address,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, directionsCallback);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
panorama.setPano(data.location.pano);
var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
panorama.setPov({
heading: heading,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
} else {
alert("Street View data not found for this location.");
}
}
function directionsCallback(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var latlng = response.routes[0].legs[0].start_location;
sv.getPanoramaByLocation(latlng, 50, processSVData);
} else {
alert("Directions service not successfull for the following reason:" + status);
}
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="pano" style="width: 425px; height: 400px;float:left"></div>
I have a section on a website I am developing where the user can input their address into the Google Geocode Api and their homes location is displayed, once the map is displayed the marker cannot be moved neither does the right click bring up the "What's Here" option.
What I am actually trying to get as well as the map view are the co-ordinates for that address ideally with the ability to allow the user to fine tune the marker to lets say the front entrance porch and have the Latitude and Longitude displayed either on the screen or inside of an input field.
Thanks for looking at this for me, I know very little about Javascript programming and greatly appreciate any help that you can offer.
Kind Regards
Ian.
The basic code I've used so far is below:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"> </script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.915892, -0.660751);
var mapOptions = {
zoom: 18,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
For that right click function, you'll have to create your own on right clicked location.
google.maps.event.addListener(map, "rightclick", function(event) {
//your code here on right click
});
here is answer to your first query that you want user to fine tune marker by dragging and get lat, lng inside input boxes.
<html>
<head>
<title></title>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.915892, -0.660751);
var mapOptions = {
zoom: 18,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#map-canvas {
width: 1000px;
height: 500px;
}
</style><div id="map-canvas"></div>
<input type="text" id="address" placeholder="type your address here"/>
<button onclick="codeAddress()">Show on map</button>
<br>
<br>
<input type="text" id="lat" />
<br>
<input type="text" id="lng" />
</body>
</html>
I'm using Google Maps to place markers from an array of zip codes but it only places about 10% of them. The rest return null results. I can't find the problem. Here is my code.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var latlng = new google.maps.LatLng(37.09024, -95.712891);
var map = new google.maps.Map(document.getElementById('pledge-map'), {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var geocoder = new google.maps.Geocoder();
var locations = <?php echo(json_encode($zips)); ?>
for (var i = 0; i < locations.length; i++) {
geocoder.geocode( { 'address': locations[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
}
});
}
</script>
locations is an array of zip code:
locations =["20190","22192","20148","06078","95136","84120","53066","53404","48323","52404","72762","89701","39667","78073","78016","76013","15613","84010","77662","77407","30127","94566","14625","45629","27406","27289","02339","01864","39116","77079","10954","37683","72801","19341","14580","64133","29579","08527","32258","33433","60093","76691","78261","77095","19426","10469","92038","85208","67220","61031","85706","72223","21222","66224","34242","30224","56232","32746","08558","72712","14209","43015","52722","32779","33518","33578","60565","11239","17007","60623","77469","20165","20002","36116","20769","20815","34209","02301","60025","48158","38804","30736","01803","45040","48069","07463","53018","73008","80951","70785","72065","91510","91506","67209","22408","36849"]
The geocoder is subject to a quota and rate limits. you are not checking for the error case (there is no code if the status returned is not OK).
Either:
look for the quota exceeded error code and handle it intelligently (add a delay and retry, only add the marker if it succeeds)
geocode the zipcodes offline and store the coordinates, use those to display your markers.
I am trying to backwards geocode Lat/Lng and get the nearest street address. However this is not always going to be completely accurate. I need to know if it is possible to get more than just one near street address.
Here is what I have that only gives one full street address result.
function locationizer(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
latlng = new google.maps.LatLng(latitude,longitude);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
zoom: 15
});
var request = {
address: latlng,
radius: '100',
types: ['street_address']
};
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
console.log(results);
for(var loc in results){
$("#output").append(results[loc].formatted_address+"<br />");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
Example Output
100 S High St, New Albany, OH 43054, USA
New Albany, OH, USA
Plain, OH, USA
New Albany, OH 43054, USA
Franklin, OH, USA
Ohio, USA
United States