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.
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";
}
});
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 want to remove one marker from my Google Map, but I can't seem to get it to work. I find various answers, all telling me to use .setMap(null) on the marker, but I can't seem to get it to work.
$map_canvas = $('#map_canvas');
var youreHere_Marker;
function centerMapToAddress( address ) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if( typeof youreHere_Marker!=="undefined"){
youreHere_Marker.setMap(null);
}
youreHere_Marker = $map_canvas.gmap('addMarker', {'position': results[0].geometry.location.lat()+','+results[0].geometry.location.lng(), 'bounds': true});
}
});
}
I get TypeError: youreHere_Marker.setMap is not a function. To my knowledge this means that the variable youreHere_Marker doesn't have the method .setMap(), but if I do console.log(youreHere_Marker) and inspect the object, I can see the method.
I have more markers on my map, via the MarkerClusterer. Those should remain untouched
I have the feeling I'm close, could someone point me in the right direction?
Edit: I've also tried .setPosition(), same error. I'm assuming I'm using the variable incorrect, but I don't know how to refer to it properly.
Well, i was working with google maps without jQuery, but i think (i'm not sure, but you may try) that you should get your marker with the following code:
youreHere_Marker = $map_canvas.gmap('get', 'markers')[0];
youreHere_Marker.setMap(null);
I'm really not sure that it will do what you want, but there is a possibility that this will work : )
I hope you'll solve you problems.
Thanks. : )
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).
I have been working on this site for about a week now. It isnt great but then again I am not great the web design. Any tips on improvements would be greatly appreciated.
Moving on I am having a problem with point in polygon extension that tparkin wrote for the google maps api. I have read through the read me, other post and everything but I can figure out why I keep getting this error ...
a.lat is not a function
[Break On This Error] Ba(I,function(a){return!a?k:this.Z[xb]...{return new Q(this.Z.d,this.aa.d,i)};
I think it might be a problem with me using the functionality of tparkins extension incorrectly but like I said I cant figure out it.
Any help is greatly appreciated in advance.
This is the website with the script problem. Please let me know if you need any additional information.
my website.
I figured out the problem I was having. Check it out.
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
});
var isWithinPolygon = polygon85.containsLatLng(results[0].geometry.location);
alert(isWithinPolygon);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
So the issues before was that instead of passing the coordinates results[0].geometry.location, I was passing it just location. Its a simple case of me not fully understanding what I was working with. Thank you for everyone that looked into this and sorry I wasted your time.
--Zac