I have a places autocomplete field that I'm using to have users give a location. The autocomplete form is working, but it is NOT biasing the location as I want. I have the following code:
function activatePlacesSearch() {
var input = document.getElementById('project-location-input');
var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var autocomplete = new google.maps.places.Autocomplete(input, location, radius);
google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
const place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
// draw the map
document.getElementById('new-project-map-div').style.display = 'block'
var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl:false,
disableDefaultUI: true,
});
// Set marker position
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: false
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
});
}
I know that you can query as follows and it works:
https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=20&location=53.2910591,-6.1823276&radius=5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o
I would like to accomplish this using my code, but I'm doing something wrong here.
One option would be to use the AutocompleteOption.bounds. If all you know is a location and a radius, you can create a circle and call getBounds on it (there is no documented way to bias the javascript autocomplete with a location and a radius).
var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var circle = new google.maps.Circle({
center: location,
radius: radius
});
var autocomplete = new google.maps.places.Autocomplete(input, {
bounds: circle.getBounds()
});
proof of concept fiddle
code snippet:
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function activatePlacesSearch() {
var input = document.getElementById('project-location-input');
var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var circle = new google.maps.Circle({
center: location,
radius: radius
});
var autocomplete = new google.maps.places.Autocomplete(input, {bounds: circle.getBounds()});
google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
const place = autocomplete.getPlace();
console.log(place);
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
// draw the map
document.getElementById('new-project-map-div').style.display = 'block'
var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl:false,
disableDefaultUI: true,
});
// Set marker position
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: false
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#new-project-map-div {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div class="pac-card" id="pac-card">
<div id="pac-container">
<input id="project-location-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="new-project-map-div"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=activatePlacesSearch"
async defer></script>
Take a look at this section in their docs: google places autocomplete location biasing. You may be able to take advantage of the strictbounds and components params.
If that doesn't get you any closer to what you're trying to accomplish, post a link to a CodeSandbox with your example and I can help you figure it out.
Cheers! 🍻
After doing some investigative work here's what I came up with.
It seems that unless you are displaying a map on the DOM (it can be positioned out of sight if you don't want to see it) then this doesn't work correctly.
Here's an example I found on JSFiddle
//snippet
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
zoom: 12
});
And here's my CodeSandbox example using your sandbox and some pointers from the example above.
Related
I try to include a business on to my embedded map, however I could not do it for my life! :D
This is what I got so far:
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 47.7914, lng: 22.87691};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYMAPAPIlanguage=hu&callback=initMap">
</script>
and I want to include this business:
https://www.google.co.uk/maps/place/Boitor+Orsolya,+Cabinet+Medical+Individual/#47.7914061,22.8747236,17z/data=!3m1!4b1!4m12!1m6!3m5!1s0x473805cc6d46a92d:0x18460661870adb34!2sBoitor+Orsolya,+Cabinet+Medical+Individual!8m2!3d47.7914061!4d22.8769123!3m4!1s0x473805cc6d46a92d:0x18460661870adb34!8m2!3d47.7914061!4d22.8769123
All I can find online is using iframes, which I would avoid because of speed.
thanks
As a reference, this is what I want to achieve without iframes:
The only thing you need is to add your desired coordinates to add a marker and to center the map. Like here. You can also add a infoWindow to describe a little more what is on that place.
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.791846, 22.876955), // <--- I found these are the coordinates for the place you mentioned
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
Check this link to see the map running
Use infoWindow
var map = new google.maps.Map(element, {
center: {lat: lat, lng: lng}, //location of the map center
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//Location of your object
var pos = {
lat: lat,
lng: lng
};
infoWindow.setPosition(pos);
infoWindow.setContent('Business'); //Name of the infowindow
Here is what it would look like
On the Google Maps javascript, there is a clickable link at the bottom left of the map with the Google icon to "See this area on Google Maps". This link opens up Google Maps, however, it only centers on the latitude/longitude provided and doesn't show the marker I provide to the API.
function initMap() {
map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739},
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739);
var marker = new google.maps.Marker({
position: coord,
map: map
});
}
I know there is a way to produce an URL that will show a marker, such an example would be http://maps.google.com/maps?q=loc:36.26577,-92.54324, but I can't seem to figure out from the API.
Should be:
function initMap() {
var center = {lat: 37.423021, lng: -122.083739};
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
zoom: 4,
center: center
});
var marker = new google.maps.Marker({
position: center,
map: map
});
// you can set other options
}
More info:
You can find required properties here: MapOptions
Example: Simple markers
EDIT:
#Sefam, I edited your code because I saw some difference with example. I edited my answer to show where is the difference.
function initMap() {
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739}, // or try:
// center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739); // here you created instance of LatLng's class
var marker = new google.maps.Marker({
position: coord, // instead this try:
//position: {lat: 37.423021, lng: -122.083739}, // here is a difference; or try:
//position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
map: map
});
}
If it doesn't work check your api key and callback function:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Also check css rules: did you set height for your map?
Also I want to explain why I gave two variants of creating properties center and position:
center: {lat: 37.423021, lng: -122.083739}
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
position: {lat: 37.423021, lng: -122.083739}
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
In my practice I used both variants and both works.
Try combinations:
center: {lat: 37.423021, lng: -122.083739} //for var map
position: {lat: 37.423021, lng: -122.083739} //for var marker
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var map
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var marker
Hope my edited answer help you to find solution. Please, post error message from console if my answer doesn't help. With error message more easier to find solution.
PS. When I need to create Google Map I always use Google Maps APIs examples and it always works.
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.
I have the following code that creates a marker on Google Maps:
function initializeMap() {
var lat = '-32.089608'; //Set your latitude.
var lon = '115.933216'; //Set your longitude.
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
I would like to add custom text to the pointer above the default marker but I cannot work out how to do it. At the moment it displays a small empty box above the default marker. (I am unable to post an example image due to lack of reputation points.
I am not very experienced with coding so any help is appreciated.
Thank you
You only need add content into your infowindow:
var infowindow = new google.maps.InfoWindow({
content: 'abcxyz'
});
I doubt the standard library supports this.
But you can use the google maps utility library:
https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here:
https://developers.google.com/maps/documentation/javascript/overlays#Markers
Google Maps API v3 marker with label
You only need to edit your marker click event function as below.
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
infoWindow.setContent('abcdxyz'); // add this line to your existing code
});
With this you can deal with multiple infoWindow for multiple markers.
Also if you want to display contents on mouseover, then you can use title property of marker like:
var marker = new google.maps.Marker({
position: {lat:lat, lng:lng},
map: map,
title: 'abcXYZ' // this will be displayed on marker mousover
});
I'm fetching the coordinates from the URL that looks like this (part of it of course): weather/59.328676,13.485656. Now, I have extract these coordinates using a function. When I am trying to load Google Maps, the controls shows but not the actual map. You can see what I mean by clicking on this link: http://server-1.myftp.org/vadret-just.nu/weather/59.328676,13.485656. The code I'm using are this:
function url_endstring(url){
return url.substr(url.lastIndexOf('/') + 1);
}
var coordinates = url_endstring(window.location.href);
var latlng = new google.maps.LatLng(coordinates);
var map_options;
var gm_map;
var marker;
function initialize() {
latlng;
map_options = {
center: latlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
gm_map = new google.maps.Map(document.getElementById('google-maps'), map_options);
marker = new google.maps.Marker({
position: latlng,
map: gm_map
});
}
Have I missed something? How can I make the Google Maps map visible?