I am using the Google Maps api to create a small, stripped down map that shows a geocoded location with a marker. You can see the live code here: http://www.ddbeadworks.com/
It works flawlessly, until someone clicks the Google logo to take themselves to maps.google.com. There, the map is properly zoomed and centered on the location, but the marker isn't being passed to maps.google.com, it seems, as that doesn't appear? I looked through the API, but I can't find anything like "markersToGoogle boolean" or any such variable.
Here is the relevant code section. This is the only place I deal with markers anywhere. JavaScript:
var address = $(this).attr("name");
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
if (status == google.maps.GeocoderStatus.OK)
{
var yourStartLatLng = new google.maps.LatLng(lat, lng);
$('#map_canvas').gmap('addMarker', {'position': yourStartLatLng, 'bounds': true});
$('#map_canvas').gmap('option', 'zoom', 14)
$('#map_canvas').gmap('option', 'disableDefaultUI', true)
}
});//close geocoder
That is what the Google logo links to, the main Google Maps web site, with the same center and zoom as the map it came from.
If you want to make a bigger map with your marker on it, you need to link to a bigger Google Maps API v3 based map (and not expect your user to use the "Google" logo).
Related
Does anybody know how to use a place_id as a marker location on Static Maps?
In the docs https://developers.google.com/maps/documentation/maps-static/dev-guide#MarkerLocations it does not indicate whether a place_id can be used, but it seems unusual that this would be missing... Google use place_id in most of the other Maps requests.
Thank you
Currently place ID is not supported as location in Static Maps API. There is a feature request in Google issue tracker that you can see at
https://issuetracker.google.com/issues/71012469
Feel free to star this feature request to add your vote and subscribe to notifications. Hopefully Google will implement it in the future.
In the Docs I don't see a way to use the place_id parameter.
You can obtain the coordinates of a place_id and then use them in the required parameter center.
var request = {
placeId: 'ChIJOwE7_GTtwokRFq0uOwLSE9g'
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
//My URL
var gStaticMapURL = "https://maps.googleapis.com/maps/api/staticmap?center=" + place.geometry.location.lat() + "," + place.geometry.location.lng() + "&zoom=14&size=400x400&key=YOUR_API_KEY";
}
});
I have a webpage that uses the google places and google maps API on the same page. A user selects a certain location from google places autocomplete and the google map then centers on that given place.
The logic of this event seems to work fine, however I've noticed that 1.) 'autocomplete' place suggestions become slower and slower with each additional place searched through the search bar, and 2.) the shadow on the place suggestions becomes darker and darker with each additional search (see pictures below).
This problem seems to be 'reset' once the browser cache is cleared, leading me to believe the issue is that the previous search terms in the input box are being stored somewhere and slowing down the google places performance.
I apologize if this is a simple issue, but googling the past few days on this problem has turned up nothing for me. Any help??
View of the search box before any problems:
Search bar after multiple previous searches:
My initMap() function:
function initMap() {
var myLatLng = {lat: 40, lng: -20}; //display the initial main map
map = new google.maps.Map(document.getElementById('bigMainMap'), {
center: myLatLng,
mapTypeControl: false,
zoom: 3
});
var searchTerm = $('#mainAdvSearchBox')[0];
var autoComplete = new google.maps.places.Autocomplete(searchTerm);
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': chosenArea}, function(results, status) { //use google place bounds to appropriately zoom on street/city/country
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
google.maps.event.addListenerOnce(map, 'bounds_changed', setSelectedMarkers);
}
else
setAllMarkers(); //user has directly navigated to adventures page, show world map and all events
});
}
My tag for including the google apis:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap" async defer></script>
This issue is caused by a mistake in implementation. This normally happens when
new google.maps.places.Autocomplete
is added inside the input's keyup event listener like this:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
// this is where things starts to go wrong
input.addEventListener('keyup', function() {
var autocomplete = new google.maps.places.Autocomplete(input);
});
}
Check out the wrong implementation here: http://jsbin.com/popucap/edit?js,output
The listener part for the input box is unnecessary. This will make your autocomplete go insane. The autocomplete will pile itself on the previous suggestions again and again. because every time you input a character, the autocomplete is being created again.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
// this is how it should be
var autocomplete = new google.maps.places.Autocomplete(input);
}
Check out the working sample here: http://jsbin.com/cubirod/edit?js,output
If this is not how you're doing it, you should get an idea of how this happens with my samples. Hope it helps!
guys I hope you can help me out with this issue. Bassically I'm trying to achive next goal:
Users fills out form (Buddyform + ACF plugin)-> Automatically post are being created from users submited form information
But there is a problem with that since one if the forms fields is Google Map field (created in ACF).
Transaction from form to post is very nice. But for some reason information about selected address is missing. Meaning that you can see marker on map and you can move map, but you can't see what is exact address.
The idea was to include address in infowindow which would open onclick. But so far I understood just how to include manually written text (content : "text here"). But I want that in infowindow would appear address from Buddyform that user submited.
Is there a way to do so?
You can see my testing here
Since am not really good with coding I use plugins for custom fields creation (ACF plugin) and in order to show custom fields in post (wpView plugin)
OK from what I can see from the documentation link in your comments. You have to add the code from the Helpers section into your page template.
In the add_marker($marker, map) method you can make another api call to get a human readable address of the marker location.
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'),
$marker.attr('data-lng') ),
formatAddress = "";
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map
});
Using the latLng variable to make request to the Geocoding service in order to get a formatted address from the variable's lat/lang coordinates.
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'location': latLng}, function(results, status)
{
if (status == 'OK') {
formatAddress = results[0].formatted_address;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
// add to array
map.markers.push( marker );
Then you when add the infowindow you can put the formatted address as it's body content.
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : formatAddress
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
I am using cordova in building the google map for device platform.
What I am going to ask is that, how to check if the user position is change?
Because the scenario is, when user is away from the specified place, the page will be redirected to logout page.
Here is the working map I have for static map (with no position change yet)
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location'
});
So the function to achieve what I want is more or less like this:
var positionMust = x, -y;
if (latLong != positionMust )
{
window.location.href//to logout
}
We need to check this everytime user is moving away.
Can anybody help? Many many thanks in advance.
You can use navigator.geolocation API as exemplified in this post:
Accessing a Google Maps API on pageload with Angular
In particular are of your interest navigator.geolocation.getCurrentPosition() and navigator.geolocation.watchPosition().
and it's also possible to check if a position is within a certain region using Google Geometry Library, see:
Determine if location is within a certain region in Google Map
All the geolocation APIs above mentioned are implemented on devices by the cordova-plugin-geolocation.
I'm trying to add a marker on a building/premise on google maps, to do this I'm using the Geocoding API. I tested it out by requesting an address and it worked perfectly.
var address = "...";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location_marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
According to the Geocoding API you can request a building/premise by using the premise property, but when using premise I'm getting a JavaScript error Uncaught InvalidValueError: unknown property premise.
This is how I'm requesting the premise property:
var premise = "...";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'premise': premise }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location_marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
I followed the answer given for this question
Not sure if anyone has had this problem before. Maybe there's another way to tackle this as well.
UPDATE
In case someone stumbles upon this question, to search businesses/places on Google Maps you can use the Places Library. This returns objects with the business's address, location, name etc.
Hopefully this helps someone :)
I there's some confusion here about what the Geocode API does. Read the API again for requests.
The required parameters are address or latlng or components, and sensor.
The optional parameters are bounds, language, region and components.
Premise is one of the properties of the returned JSON data. This means that you can't use it as a search parameter which is why the API is complaining.
The answer in that question to which you linked is wrong.
Hope this is helpful.