Here I'm using this Places API in my project to find the locations of user but when I click on the field popup is opening as know your location by giving two options allow and block but client don't want that popup to be open it always allow the user to know the location. is there any option in the api to do this functionality.
Here is the documentation for your answer.
Just ask for permission as a clear response to a user gesture.
Create a button for user to allow device location, then;
var usermarkers = [];
var userMarker;
function geolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
userLat = position.coords.latitude;
userLng = position.coords.longitude;
currentloc = { lat: userLat, lng: userLng };
var userSerial = "987654321";
for (var i = 0; i < usermarkers.length; i++) {
if (usermarkers[i].serialNumber === userSerial) {
usermarkers[i].setMap(null);
usermarkers = [];
}
}
userMarker = new google.maps.Marker({
position: currentloc,
map: map,
serialNumber: userSerial
});
userMarker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
usermarkers.push(userMarker);
calculateDistance(ppath);
});
} else {
alert("Error: Your browser doesn\'t support geolocation.");
}
}
I also added marker remove for next calls. Hope this helps.
Related
I follow this guide
https://developers.google.com/maps/documentation/javascript/places#places_photos
to create place photo as marker icon. This is my map initialization code:
var map;
function initMap() {
// Create a map centered in Pyrmont, Sydney (Australia).
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.920812, lng: 107.604116},
zoom: 13
});
var request = {
location: map.getCenter(),
radius: '5000',
type: ['shopping_mall']
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
console.log(results);
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createPhotoMarker(place);
}
}
}
google.maps.event.addDomListener(window, 'load', initMap);
this is the createPhotoMarker function
function createPhotoMarker(place) {
var photos = place.photos;
if (!photos) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name
});
return;
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
});
}
the function will create regular marker if place photo is not available. But for the place with photo available, I get this error :
Failed to load resource: the server responded with a status of 404 () lh3.googleusercontent.com/w35-h35-p/AF1QipOIL6GVVmtqp_cw_hBEQxdILZSa8poMO0HAqFHd=k
And the map only shows regular marker.
What did I do wrong?
This is the fiddle http://jsfiddle.net/v90fmrhp/
==========Update 2017-07-07============
Thanks for the answers and fixes
It seems the issue solved. My fiddle is working now
https://issuetracker.google.com/issues/63298126
Marked as Fixed
Good news! We have fixed this issue. Thanks for your patience.
Happy Mapping!
Looks like the error you are seeing is caused by some issue on Google's side. It's affecting quite a few other users as well, have a look at their public issue tracker:
Thanks for reporting this issue. We verified it and we'll keep tracking it.
https://issuetracker.google.com/issues/63298126
UPDATE (2017-07-06):
A fix for this is going into our release process now and it should be out soon - probably Monday at the latest.
https://issuetracker.google.com/issues/63298126#comment13
Had the same issue and Sulyman suggested a workaround that is working but I don't know for how long when google fixes this.
Google Places Photos .GetUrl is adding width and height to url
Here is what we did.
if(place.photos != null){
for(var i = 0; i < place.photos.length; i++){
//Do a string replace to get the w-h-p out of there.
var str = place.photos[i].getUrl({"maxWidth": 100, "maxHeight": 100});
var res = str.replace("w100-h100-p", "p");
self.pacPhotos.push({
id : res
});
}
}else {
console.log("no photo");
}
}
I also ran into this with google places api. Everything was working fine then randomly it stopped. It seems likely that it is due to google making changes as they get ready for releasing a better maps api to support vector
#DKinnison saved me with his solution so I just wanted to post my ES6 solution for parsing a received place. I commented out the other properties I am personally not using in case you need to.
const PHOTO_WIDTH = 600;
const PHOTO_HEIGHT = 600;
export function parseGooglePlace(place) {
if (!place) {
return;
}
const {
// address_components,
formatted_address,
geometry,
// icon,
// id,
// international_phone_number,
name,
// rating,
// reviews,
// opening_hours,
photos: _photos = [],
place_id,
// reference,
types = [],
// url: mapsURL,
// utc_offset,
// vicinity,
website,
} = place;
const photos = _photos.map(p =>
p
.getUrl({ maxWidth: PHOTO_WIDTH, maxHeight: PHOTO_HEIGHT })
.replace(`w${PHOTO_WIDTH}-h${PHOTO_HEIGHT}-p`, 'p'),
);
return {
website,
name,
photos,
address: formatted_address,
placeId: place_id,
geometry,
types,
};
}
I am using Drupal 7 - Location, GMap module. I have a view that renders the result in a gmap. Everything works fine here and I get all the markers. Now I need a Find My location button which shows the users current location and adds a marker to the existing map.
Google Map Api V3 always works on a newly created map and I couldn't find a function which returns an existing map in the current page.
Gmap module provides a JS function - Drupal.gmap.getMap('ur-map-id') which is supposed to return a pointer to the map whose id is given. But this did not work.
Could someone please guide me as to how I should go about this? Can I get it work with Google Maps API? I need to retain the original map with all its markers.
Here's something for reference.
if (typeof(navigator.geolocation) !== 'undefined') {
var showUserOnMap = function(position) {
var map = Drupal.gmap.getMap('gmap-auto1map-gmap0');
if (typeof(map) !== 'undefined' && map !== false) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
var marker = {
latitude: latitude,
longitude: longitude,
markername: Drupal.t('You'),
opts: {
title: Drupal.t('You')
}
}
marker.opts.position = new google.maps.LatLng(latitude, longitude);
marker.opts.map = map.map;
Drupal.gmap.factory.marker(marker.opts);
}
};
// Get the current location
navigator.geolocation.getCurrentPosition(showUserOnMap);
}
I am having this issue as well, you can put this jquery code in for it to actually centre around your current location - but no marker is added. Just add it anywhere in your theme,
jQuery(document).ready(function() {
jQuery(function($) {
$.extend({
initialize: function () {
var m = Drupal.gmap.getMap('auto1map');
if (m.map && m.markersready) {
$.setCoords();
}
else {
m.bind('markersready', function(data) {
$.setCoords();
});
}
},
setCoords: function () {
navigator.geolocation.getCurrentPosition(function (position) {
var gmap = Drupal.gmap.getMap('auto1map').map;
var lat = position.coords.latitude;
var lng = position.coords.longitude;
gmap.setCenter(new google.maps.LatLng(lat, lng));
gmap.setZoom(13);
});
}
});
$.initialize();
});
});
Now you can centre your map around your location and now I need to figure out a way to place a marker down at this location.
I use gmap for geolocation, i.e. to set markers on a google map on specific positions.
Now what I want to achieve is to set markers and as soon as a user clicks on one of these markers, a info window opens and shows specific text. Every marker has its own text.
Now the problem is that I can't determine which marker the user has clicked and therefore can't set the right text.
Here's a code snippet:
//**Global variables**/
var thingsOfInterest = new Array(new Array(), new Array(),new Array());
var map = null;
//End Global variables
//init google map
function initGoogleMaps(){
map = new google.maps.Map(document.getElementById("map_canvas"));
var centerMap = new google.maps.LatLng(48.337881,14.320323);
$('#map_canvas').gmap({'zoom':7,'center': centerMap});
$('#map_canvas').gmap('option', 'zoom', 10);
//This is not working on my ios-simulator, no idea why. Anyway....
forge.geolocation.getCurrentPosition(function(position) {
alert("Your current position is: "+position);
}, function(error) {
});
}
/*End init map*/
/*Set the markers on the map*/
function setMarkers() {
/* thingsOf Interest contains:
* thingsOfInterest[i][0] -> the text that the marker should hold
* thingsOfInterest[i][1] -> the latitude
* thingsOfInterest[i][2] -> the longitude
*/
for (var i = 0; i < thingsOfInterest.length; i++) { //Iterate through all things
var item = thingsOfInterest[i]; //get thing out of array
var itemLatLng = new google.maps.LatLng(item[1], item[2]);
$('#map_canvas').gmap('addMarker', {'position': new google.maps.LatLng(item[1],item[2]) } ).click(function(e) {
$('#map_canvas').gmap('openInfoWindow', {'content': 'dummyContent'}, this); ///////SET REAL CONTENT HERE
});
}
}
Now this works all great, but what I miss is to get the marker the user has clicked on in the function()-eventHandler. If I could get the specific marker, I could set the text on it.
I hope this is clear enough.
Any help is very appreciated.
Thanks,
enne
Assuming your code with dummy text is working, you can pass your text right away..
$('#map_canvas').gmap('addMarker', {'position': new google.maps.LatLng(item[1],item[2])})
.click(function(e) {
$('#map_canvas').gmap('openInfoWindow', {'content': item[0]}, this);
});
Or another approach would be:
function setMarkers() {
for (var i = 0; i < thingsOfInterest.length; i++) {
var item = thingsOfInterest[i];
var itemLatLng = new google.maps.LatLng(item[1], item[2]);
var marker = new google.maps.Marker({ position: itemLatLng, map: map });
google.maps.event.addListener(marker, 'click', function () {
var infowindow = new google.maps.InfoWindow({ content: item[0] });
infowindow.open(map, marker);
});
}
}
I have a list of schools that I want to plot on a Google Map. I'm using Google's Geocoding Service to lookup the lng/lat for a given postcode, upon successfully retrieving this information I want to drop a marker, together with adding the appropriate event listener that opens an infobox when a given marker is clicked.
When I make a request to the geocoder it's in the context of a school, when I receive a callback I lose this context. You'll see from code below that I've come up with a clunky solution to this, although it fails occasionally when the geocoder results truncate the postcode.
Should I be using something like jQuery's Deferred Object to solve this issue?
var geocoder;
var map;
var infowindow
var iterator = 0;
geosearch = new Array();
function drop() {
for (var i = 0; i < schools.length; i++) {
setTimeout(function() { // delay added to prevent being throttled
addMarker();
iterator++;
}, i * 1000);
}
}
function addMarker() {
address = schools[iterator].addresses[0].address.zip;
geosearch[address] = schools[iterator]; // this is how I'm keeping track of initial request
geocoder.geocode( { 'address': address }, function(results, status) {
var school = geosearch[results[0].address_components[0].short_name]; // loading the school associated with the initial request, which only works if the postcode completely matches up - clunky!
if (status == google.maps.GeocoderStatus.OK) {
// each school has tags, I want to set a marker if certain tags exist
if ($.inArray('D', school.tags) > 0) {
var image = 'map_markers/brown_MarkerD.png';
} else if ($.inArray('C', school.tags) > 0) {
var image = 'map_markers/red_MarkerC.png';
} else if ($.inArray('B', school.tags) > 0) {
var image = 'map_markers/yellow_MarkerB.png';
} else if ($.inArray('A', school.tags) > 0) {
var image = 'map_markers/green_MarkerA.png';
} else {
var image = 'map_markers/blue_MarkerZ.png';
}
// add the marker to the map, using result
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: false,
icon: image,
shadow: 'http://www.google.com/mapfiles/arrowshadow.png',
animation: google.maps.Animation.DROP
});
// adds listening on marker so that popup box appears when clicked
google.maps.event.addListener(marker, 'click', (function(marker, school) {
return function() {
infowindow.setContent(
''+school.name+''
+'<address>'
+school.addresses[0].address.street+'<br />'
+school.addresses[0].address.city+'<br />'
+school.addresses[0].address.state+'<br />'
+school.addresses[0].address.zip+'<br />'
+school.addresses[0].address.country+'<br />'
+'</address>');
infowindow.open(map, marker);
}
})(marker, school));
} else {
console.log("* NOT found: " + status);
}
});
}
function initialise() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(54.82659788452641,-3.417279296874991);
var mapOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
drop(); // loops through schools to add marker
}
I would suggest geocoding the addresses offline and storing the coordinates in your database (or wherever you are storing the addresses). Then use the coordinates to display the markers.
I would also suggest reviewing this article on geocoding strategies from the documentation
To answer your question, I would suggest using javascript function closures to associate the address with the callback function.
The problem I was experiencing here was just a questions of scope, and in particular the way that I was referencing the school within the addMarker() function. Rather than referencing the school within the schools array using the global iterator variable, I instead pass in this school, this way the correct school is always referenced on the callback that is created within this scope.
var geocoder;
var map;
var infowindow
var iterator = 0;
function drop() {
for (var i = 0; i < schools.length; i++) {
setTimeout(function() {
addMarker(schools[iterator]); // pass in the school as an argument
iterator++;
$('#current_school').text(iterator); // taken this out of addMarker()
}, i * 1000);
}
}
function addMarker(school) {
geocoder.geocode( { 'address': school.addresses[0].address.zip }, function(results, status) {
... // the inners from here remain the same
});
}
"My Location" in Google Maps javascript API
This question was asked over half a year ago. Has Google Maps API v3 updated to use the "My Location" button found on http://maps.google.com?
My Location is the control between the Street View man and the gamepad-looking controls.
If Google Maps API doesn't provide My Location then do I need to write my own HTML5 geolocation feature using navigator.gelocation then create my own control on Google Maps?
No, but adding your own marker based on current location is easy:
var myloc = new google.maps.Marker({
clickable: false,
icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
new google.maps.Size(22,22),
new google.maps.Point(0,18),
new google.maps.Point(11,11)),
shadow: null,
zIndex: 999,
map: // your google.maps.Map object
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
myloc.setPosition(me);
}, function(error) {
// ...
});
}
We have made such a component for Google Maps API v3. Anybody can use in custom projects to add a control showing current geolocation with just one line of code:
var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);
after including in the HTML header this JavaScript:
<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
See:
http://www.maptiler.com/maptilerlayer/
for an example code and documentation.
It adds the standard control to the map - and once tapped - it shows the blue circle around your location with size derived from precision of the location data available. If you don't drag the map it will keep you positioned once you move.
This control has been developed for viewer automatically generated by http://www.maptiler.com/ software - which creates tiles for map overlays and custom layers made from images and raster geodata.
you have to do it by your own. Here is a piece of code to add "Your Location" button.
HTML
<div id="map">Map will be here</div>
CSS
#map {width:100%;height: 400px;}
JS
var map;
var faisalabad = {lat:31.4181, lng:73.0776};
function addYourLocationButton(map, marker)
{
var controlDiv = document.createElement('div');
var firstChild = document.createElement('button');
firstChild.style.backgroundColor = '#fff';
firstChild.style.border = 'none';
firstChild.style.outline = 'none';
firstChild.style.width = '28px';
firstChild.style.height = '28px';
firstChild.style.borderRadius = '2px';
firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
firstChild.style.cursor = 'pointer';
firstChild.style.marginRight = '10px';
firstChild.style.padding = '0px';
firstChild.title = 'Your Location';
controlDiv.appendChild(firstChild);
var secondChild = document.createElement('div');
secondChild.style.margin = '5px';
secondChild.style.width = '18px';
secondChild.style.height = '18px';
secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
secondChild.style.backgroundSize = '180px 18px';
secondChild.style.backgroundPosition = '0px 0px';
secondChild.style.backgroundRepeat = 'no-repeat';
secondChild.id = 'you_location_img';
firstChild.appendChild(secondChild);
google.maps.event.addListener(map, 'dragend', function() {
$('#you_location_img').css('background-position', '0px 0px');
});
firstChild.addEventListener('click', function() {
var imgX = '0';
var animationInterval = setInterval(function(){
if(imgX == '-18') imgX = '0';
else imgX = '-18';
$('#you_location_img').css('background-position', imgX+'px 0px');
}, 500);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
marker.setPosition(latlng);
map.setCenter(latlng);
clearInterval(animationInterval);
$('#you_location_img').css('background-position', '-144px 0px');
});
}
else{
clearInterval(animationInterval);
$('#you_location_img').css('background-position', '0px 0px');
}
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: faisalabad
});
var myMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: faisalabad
});
addYourLocationButton(map, myMarker);
}
$(document).ready(function(e) {
initMap();
});
//copy and paste this in your script section.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('location not supported');
}
//callbacks
function error(msg) {
alert('error in geolocation');
}
function success(position) {
var lats = position.coords.latitude;
var lngs = position.coords.longitude;
alert(lats);
alert(lngs)
};