I want to use google API in my project.
The api i got is from here
And the APi IS :- https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=5000&types=food&sensor=false&key=*******************
NOTE:- I had appended my KEY at the end of this URL. It is showing me proper response.
But if i change the latitude and longitude to Gujarat state ( country india) ..Then it is not showing me any response.
And the response if ZERO_RESULT
Can anyone help me why it is happening and how to solve it.
I This is want to do this is to get the nearby information of current latitide-longitude..
Is there any other way or api to get the information of nearby area..
Please help me..
Thanks in advance
I used this snippet and it works for every case.
<body>
<div id="mainpanel" style="float:left; background-color:#fff; width:75%;">
<div style="display:none;" id="lat">hhh</div><div style="display:none;" id="lon">hhh</div>
<script>
var x=document.getElementById("lat");
var y=document.getElementById("lon");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML=position.coords.latitude;
y.innerHTML=position.coords.longitude;
loadScript();
}
function initialize()
{
var xval=document.getElementById("lat").innerHTML;
var yval=document.getElementById("lon").innerHTML;
var mapProp = {
center: new google.maps.LatLng(xval,yval),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
//window.onload = loadScript;
</script>
<form>
<input class="boxinput" type="text" class="form-control" placeholder="Phone" id="" name=""/>
</form>
<div class="serchbox"></div>
<div id="googleMap" style="width:960px;height:804px;"></div>
</div>
</body>
If there is no register place on map around given coordinates(latitude & longitude) with given radius then API will responds ZERO_RESULT
To get result
Specify correct coordinates(Current location)
Radius limit, maximum allowed radius is 50000 meters = 50 KM
Following url is working - Gives places of type food within 30 KM distance from Gujarat (given coordinates).
https://maps.googleapis.com/maps/api/place/search/json?location=23.0,72.0&radius=30000&types=food&sensor=false&key= [API key]
Related
I have an ASP.NET Core 2.2 website that creates a map from an address using the google geocoding api and map javascript api. It works in Visual Studio 2017, but when I publish it to Azure, it doesn't work anymore. The map doesn't appear. The developer console shows no errors.
I use the Geocoding API to generate a latlong, from the street address. I added a debug statement to confirm that I am successfully talking to the api, and it does get lat long back.
The website is http://americanhorseproperties.com
<div id="map">
</div>
<a asp-page="./Index">Back to Gallery</a>
<input type="hidden" id="address" value="#Model.house.address
#Model.house.city" />
<script>
// Initialize and add the map
function initMap() {
var geocoder = new google.maps.Geocoder();
//gets address from the address hidden input element in body
var address = document.getElementById('address').value;
//geocodes address and gets latlong
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == 'OK') {
console.log('location: Longitude: ',
results[0].geometry.location.lng());
console.log('location: Latitude: ',
results[0].geometry.location.lat());
var map = new google.maps.Map(document.getElementById('map'), { zoom: 14,
center: results[0].geometry.location });
var marker = new google.maps.Marker({ map: map, position:
results[0].geometry.location }); //sets marker at new lat long
} else {
alert('Geocode was not successful for the following reason: ' +
status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=KEY_REMOVED&callback=initMap">
</script>
It seems you need to set "height" property for <div id="map">
CSS Problem.
The Google Maps API automatically adds the CSS properties "position: relative; overflow: hidden;" to the div that is used for displaying the map. When I manually remove any of these two properties in the developer console of the browser, the map becomes visible.
Make sure the div has a size that the map can fill.
I would like to use the following google map API snippet in my ASP.net application to retrieve the latitude and longitude of the selected point by the user.
This code show the map same as https://www.google.com/maps/#25.3812696,58.4464073,6z. Instead of the map from '.com', I want to see the map from '.ae'.
That is the map same as https://www.google.ae/maps/#25.3812696,58.4464073,6z. Both maps are from google based on the country.
Is there any way to achieve this ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location Tracking</title>
</head>
<body>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(24, 54),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
//this part will return the coordinates to the parent page
alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
});
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
With Thanks and Regards,
I played around with javascript map for a little bit and figured out that by adding &languange=ae at the end of the src, you can have a similar effect. Please check out the example for jsfiddle, and try to add language to your code src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ae". Hope that works for you.
I'm writing a Wordpress page for a client that displays some text and a Google Map based on data loaded from a database.
So far I've gotten most of it to work. The Google Maps however begins to load then mysteriously "blues" out displaying only what looks like ocean with all the other options (zoom in/out, street view, etc.) greyed out.
There are no JavaScript errors available from FireBug etc.
The divs containing the map (#container, and #map-canvas ) are set to real pixel values.
The solution given here yields no positive results.
This is what the end result looks like:
Any ideas would be extremely welcome.
Edit:
Code snip per request:
echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
echo '
<div id="container" style="height:500px;width:500px;">
<div id="information">
<h2>'.$detail['name'].'</h2>
<p>'.$detail['description'].'</p>
<p>'.$detail['address'].'</p>
</div>
<div id="map-canvas" style="width:300px;height:200px;">
</div>
</div>
';
Un-minified version of the JS:
function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
var mapOptions = {
center: ourLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: ourLocation,
title:name
});
google.maps.event.addDomListener(window,"load",initialize);
};
jQuery(function($){
initialize(lat,lng,name);
// the variables lat, lng, and name are replaced with php variables in the code
});
I figured it out. Took a little while, but...
Wordpress hates the jQuery call for some reason or another.
I noticed that in the JS console, if I called the initialize function with the variables I'd rip from the generated source then the map would magically work.
Instead of using jQuery, I just used the windows onload event.
window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }
Which magically works.
Lesson learned, jQuery and Wordpress are like Strawberry Chocolate Milk and India Pale Ales: they don't mix well.
Thank you everyone that contributed.
I am successful to display multiple maps through a php loop. But at the end I am calling window.print. My problem is that the window.print is getting triggered before the map loads and blank space is shown on the print page.
Here is my example code:
{loop starts}
<div latitude="<?php echo $row['lat'];?>" longitude="<?php echo $row['lng'];?>" zoom="<?php echo $row['map_zoom_level'];?>" class="map_canvas"></div>
{loop ends}
Javascript:
$(document).ready(function(){
$('.map_canvas').each(function(index, Element) {
var lat = $(Element).attr('latitude');
var lng = $(Element).attr('longitude');
var latlng = lat+','+lng;
var zoomlevel = parseInt($(Element).attr('zoom'));
var origin = new google.maps.LatLng(lat,lng)
$(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
$(Element).gmap('get','map').setOptions({'center':origin});
$(Element).gmap('addMarker', {'position': latlng}).click();
});
});
window.print();
});
Can anyone help me fix this.
How to use own map database to display map on a website and use that map to find route and do other stuff ?
You should try the Google Maps API. http://code.google.com/apis/maps/index.html
You can store locations or routes in your database and use the Maps API to display them. Not sure if this is what you're looking for, but I've found their API really easy to use.
That is an absolutely massive task, I'm not sure I understand your question correctly... You've tagged this with Javascript, Web-development and map - so presumably you want to know how to implement a front-end that renders a map to a web page, and then performs custom pathfinding and other logic. Surely I'm misunderstanding you! :D
The O'rielly RESTful Web Services book uses a map service as its operative example throughout the book, so you may find it useful, at least for the design of your service front end. It doesn't delve into the implementation very deeply, particularly the actual mechanics of map image generation, as it is primarily concerned with the design of the service interface from an HTTP perspective. It also doesn't treat very much with the client-side logic that would be involved in dragging, zooming and the like.
You have two options in order to calculate routes depending on your database.
If your database has clean and accurate address names then you can easily use the google maps API that can be found here: https://developers.google.com/maps/documentation/directions/.
Bare in mind that you can only execute 2500 requests per day with the free version.
On the other hand if you have a network defined on your db (have the roads in a nodes and arcs manner) then you can implement Dijsktra's algorithm.
Have a look here: http://www.vogella.com/articles/JavaAlgorithmsDijkstra/article.html
Because of the fact that the network should be loaded from the database in order to calculate the best route I suggest the singleton pattern.
An OpenSource way to do this, which I would recommend in most cases, is using GeoServer and OpenLayers.
GeoServer can read gegraphic data from all the major databases and be used as host for the widely used standard GeographicgWebServices WMS and WFS.
OpenLayers is a JavaScript API to show your map on the webpage.
I recently implemented something like this. I realize it is an old question but Google has the javascript api v3 out for Google Maps and it works great.
https://developers.google.com/maps/articles/phpsqlajax_v3
This page helped me implement the entire system. Works great. You can also use php to update and edit the entries on the map.
You need xml pages and others but here is the map html page just to give you an idea of the javascript it entails.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>