I have implemented Html5 geo-location.It works Good in system.
But when i used to run this on mobile device it's not working if my location service is turned off .
However my mobile devices is Connected through WiFi it is not showing location.It as to show something nearest point
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementsByName("address").item(0).value = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
Related
I have been working on Google map project and encountered this issue.
I wanted to use setCenter method to relocate map center. I only can see the gray map instead. I think it's supposed to be working find but I don't know what is wrong
Here is how it looks likeenter image description here
enter code here
var map;
var marker;
function initMap(){
var options = {
center: new google.maps.LatLng(37.4989885,127.03282719999993),
zoom : 8
};
map = new google.maps.Map(document.getElementById('map'), options);
marker = new google.maps.Marker({
position : {lat:37.4989885,lng:127.03282719999993},
map : map
});
}
function changePosition(altitude, longitude){
map.setCenter(new google.maps.LatLng(altitude,longitude));
marker.setPosition(new google.maps.LatLng(altitude,longitude));
}
$(function() {
var url = "tourXML";
$.ajax({
type : "GET",
url : url,
dataType : "text",
success : function(data) {
var temp = $.trim(data);
obj = JSON.parse(temp);
var longitude = parseFloat(obj.longitude);
var altitude = parseFloat(obj.altitude);
changePosition(altitude, longitude);
$("#altitude").html(obj.altitude);
$("#longitude").html(obj.longitude);
},
error : function() {
alert("error.");
}
});
});
You can use this code Modified it as per you need
map.setCenter(21.219381 ,72.840128);
or
map.setCenter(pos);
enter code here
function initMap ()
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 21.219381, lng: 72.840128}
});
var geocoder = new google.maps.Geocoder;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var infowindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
geocoder.geocode({'location': pos}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(JSON.stringify(results[0]));
map.setZoom(11);
var marker = new google.maps.Marker({
position: pos,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
map.setCenter(pos);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
When I pass the address to Google Maps .com in the browser, it returns a certain name of the address on the marker(as shown in fig -1). But when I pass the postal address using Google Place and Geocoder API’s, it returns me the address and place ID with the marker(as shown in fig-2) .
As shown in images the address values returned by MAPS application is different from the one’s I am getting through the API’s.
Is it some attribute of the API which gives the name of the building or centre situated at this address?
Is it some premium service that I need to buy in order to display the exact name of building at this address ?
I have tried with various attributes of the PLACES API but not getting the value I need. using PLACE API
var address = "1900 S Jackson Rd Suite 7 MCALLEN TX";
var map;
var marker;
var service;
var request;
function initialize() {
var geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'),
{
center : {
lat : - 33.866, lng : 151.196
},
zoom : 15
});
if (geocoder) {
geocoder.geocode( {
'address' : address
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
service = new google.maps.places.PlacesService(map);
console.log(results[0].place_id);
map.setCenter(results[0].geometry.location);
console.log('resulta ddre '+results[0].formatted_address);
service.getDetails( {
placeId : (results[0].place_id)
},
function (place, status) {
var infowindow = new google.maps.InfoWindow();
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(status);
marker = new google.maps.Marker( {
map : map, position : place.geometry.location
});
console.log('<HTML ATT>'+ place.address_components+'Place ID: ' + place.place_id
+ '<Place Name>' + place.name
+ '<Formatted Address>' + place.formatted_address);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' + place.formatted_address +
'</div>');
infowindow.open(map, this);
});
}
});
};
}
});
}
}
When you search "1900 S Jackson Rd Suite 7 MCALLEN TX" on maps.google.com you get the location of "Pediatric Lung Center: Ayres Roberto A MD".
Please note that Geocoding service works only with street addresses, and businesses are excluded from the search. In your code you execute a geocoding request first so you get a different result. You have to execute places text search to get the same business as on maps.google.com.
Have a look at the following example:
code snippet:
var map;
var infowindow;
var address = "1900 S Jackson Rd Suite 7 MCALLEN TX";
function initMap() {
var m_center = {lat: 26.1817228, lng: -98.2098557};
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: m_center,
zoom: 16
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.textSearch({
query: address,
bounds: map.getBounds()
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initMap"></script>
Update: Based on the OVER_QUERY_LIMIT recommendation, I found a potentially promising solution that I will try tonight.
Initially I could not get a Google Map API v3 to display on my PC. The same code worked on an Amazon server. I've moved to Rackspace and now it doesn't display. Here's the code I'm using:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiv-nrDCYEEGzD1mk3jAfapfrBH878pqc&sensor=true">
</script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var phpAddressInit = "<?php echo $mapAddress ?>";
//document.write("phpAddressInit: " + phpAddressInit);
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var latlng = new google.maps.LatLng(33.5750, -117.7256);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
geocoder.geocode( { 'address': phpAddressInit}, function(results, status) {
//alert("---address3: " + phpAddressInit);
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);
}
});
}
function codeAddress(control,ctrlAddress) {
//alert("---in codeAddress; " + "control: " + control
// + "ctrlAddress: " + ctrlAddress);
//var address = document.getElementById('address').value;
//aws.push
var address;
if ( control == 1 )
{
address = document.getElementById('address').value;
}
else
{
address = ctrlAddress;
}
geocoder = new google.maps.Geocoder();
//alert("---address1: " + address);
geocoder.geocode( { 'address': address}, function(results, status) {
//alert("---address2: " + address);
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);
}
});
}
</script>
...
I've googled this for several hours, tried several different examples, but it won't display. What am I missing?
Seb P made me aware it is working now. Thank you, it is working now.
Still using the original code that didn't work so I can't say with confidence that the problem is fixed. Looking through links associated with OVER_QUERY_LIMIT, Rackspace seems to group users together to use the same IP leading to this error.
None of this is confirmed but that seems to fit with what I am seeing. It would be nice if someone could shed more light on this so that this problem can be avoided.
I know that similar questions have been posted but I have not found and answer in any of them as it relates to my particular issue.
I have a javascript that uses google maps to place customer zipcodes on a map. The problem I am have is similar to what others have already posted – I get a “over query limit” error.
I have tried different setups using setTimeOut to try to send google the data within the allowable time intervals but I can’t get it to work.
Here is my action:
function initialize()
{
var rowNum = 0 ;
var rowColor = "" ;
var latlng = new google.maps.LatLng(27.91425, -82.842617);
var myOptions =
{
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
geocoder = new google.maps.Geocoder();
data.forEach(function(mapData,idx)
{
window.setTimeout(function()
{
geocoder.geocode({ 'address': mapData.address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: mapData.title,
icon: getIcon(mapData.type)
});
var contentHtml = "<div style='width:250px;height:90px'><strong>"+mapData.title+"</strong><br />"+mapData.address+"</div>";
var infowindow = new google.maps.InfoWindow({
content: contentHtml
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});
marker.locid = idx+1;
marker.infowindow = infowindow;
markers[markers.length] = marker;
if (idx%2 == 0)
{
rowColor = 'style="background-color:#00FFFF;"' ;
}
else
{
rowColor = 'style="background-color:#FFFFFF;"' ;
}
var sideHtml = '<div ' + rowColor + ' class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';
sideHtml += mapData.address + '</div>';
$("#locs").append(sideHtml);
//Are we all done? Not 100% sure of this
if(markers.length == data.length) doFilter();
}
else
{
// alert("Geocode was not successful for the following reason: " + status);
}
}, 3000);
});
});
When I run my page using this action, I get back 11 markers even though I have many more than that in my JSON string. The window.setTimeout has absolutely no effect – I’m obviously doing something wrong here.
I would appreciate any help on this matter.
Thanks,
I found the answer to my question. I found the following code on the Web and modified it to my needs.
With it, you can load many markers without getting Over Query Limit from Google.
I have tested it with over 100 markers and it works beautifully. The page does not freeze up at all.
I am certain some of you guys can do something much more elegant and efficient but this is a good starting point.
<script type="text/javascript">
//<![CDATA[
// display ani gif
loadingGMap() ;
// delay between geocode requests - at the time of writing, 100 miliseconds seems to work well
var delay = 100;
// ====== Create map objects ======
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(27.989551,-82.462235);
var mapOptions =
{
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geo = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
// ====== Geocoding ======
function getAddress(search, next)
{
geo.geocode({address:search}, function (results,status)
{
// If that was successful
if (status == google.maps.GeocoderStatus.OK)
{
// Lets assume that the first marker is the one we want
var p = results[0].geometry.location;
var lat = p.lat();
var lng = p.lng();
// Output the data
var msg = 'address="' + search + '" lat=' +lat+ ' lng=' +lng+ '(delay='+delay+'ms)<br>';
//document.getElementById("messages").innerHTML += msg;
// Create a marker
createMarker(search,lat,lng);
}
// ====== Decode the error status ======
else
{
// === if we were sending the requests to fast, try this one again and increase the delay
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
nextAddress--;
delay++;
}
else
{
var reason = "Code "+status;
var msg = 'address="' + search + '" error=' +reason+ '(delay='+delay+'ms)<br>';
// document.getElementById("messages").innerHTML += msg;
}
}
next();
}
);
}
// ======= Function to create a marker
function createMarker(add,lat,lng)
{
var contentString = add;
if (add=='EOF')
{
stopLoadingGMap() ;
}
var addArray = add.split(' ');
var zipcode = addArray.pop();
var zipcode = add.match(/\d{5}/)[0] ;
var image = 'icons/sm_02.png';
var marker = new MarkerWithLabel(
{
position: new google.maps.LatLng(lat,lng),
map: map,
icon: image,
labelContent: zipcode,
labelAnchor: new google.maps.Point(50, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
}
// ======= An array of locations that we want to Geocode ========
// use static or build dynamically
// use as many markers as you need – I’ve test with over 100
var addresses = var data = [
{‘StreetAddress1 City State Zipcode’},
{‘StreetAddress2 City State Zipcode’},
{‘StreetAddress3 City State Zipcode’},
{‘StreetAddress14 City State Zipcode’},
…
{‘EOF’},
];
// ======= Global variable to remind us what to do next
var nextAddress = 0;
// ======= Function to call the next Geocode operation when the reply comes back
function theNext()
{
if (nextAddress < addresses.length)
{
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
}
else
{
// We're done. Show map bounds
map.fitBounds(bounds);
}
}
// ======= Call that function for the first time =======
theNext();
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
I am building a store locator using php sql and javascript. I've done this tutorial https://developers.google.com/maps/articles/phpsqlsearch_v3 and got it working. I am trying to implement zoom in/out links on the infoWindows, for when the user clicks a marker. Its not working, in FireFox I am getting no errors in the console. In Chrome I am getting Uncaught TypeError: Object # has no method 'setCenter'
Ive been searching the forums but have been unable to find a solution. Sorry I dont have a version online to look at, working locally. Below is the script I am using.
var map = null;
var markers = [];
var infoWindow;
var locationSelect;
//On page load Create a google map in #map
//Set default cordinates & Map style to roadmap
function load() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
infoWindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
//Search for LAT/LNG of a place using its address using Google Maps Geocoder
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
//Clears Prve location, in info box
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
//Look for locations near by and loop through all data getting lat & lng of each marker
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'http://localhost:8888/starward/wp-content/themes/starward/map_request.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var zoom = 18;
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address,zoom);
bounds.extend(latlng);
}
map.fitBounds(bounds);
map.setZoom(11);
// map.setCenter(center);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
//Creates marker on the map
//Adds event for user when they click address info pops up
function createMarker(latlng, name, address, zoom) {
//var html = "<b>" + name + "</b> <br/>" + address
// add the zoom links
var html = "<b>" + name + "</b> <br/>" + address
html += '<br>Zoom To';
html += ' [+]';
html += ' [-]';
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
marker.MyZoom = zoom;
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
//Look up XML sheet to get data
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
It works for me in both IE and Firefox. Although to me the behavior makes more sense if I set the center for the "ZoomTo" link as well:
html += '<br>Zoom To';