Here is the code which I'm using to display search-box inside Google map.
function setSearchbox(map) {
// Create the search box and link it to the UI element.
var input = document.getElementById('searchLocation');
var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
var icon = {
url: place.icon,
size: new google.maps.Size(40, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
And the output is,
Is it possible to move the search result box to just above the search box (drop-up instead of drop-down)?
I've gone through lot of reference website, but no luck.
Related
I am using Google Maps API to allow customers to more accurately identify where their products should be delivered in a city where addresses are inaccurate.
I tried the answers here and here, but neither resolved the issue.
We place a moveable pin at the location the customer specifies, and then retrieve the GPS coordinates once the customer is satisfied with their placement and hits "continue".
The problem is that the retrieved coordinates are neither the original ones associated with the address nor the new ones associated with the last location of said pin.
function initMap() {
var latitude = -8.111735;
var longitude = -79.025550;
if(localStorage.getItem('dm-latitude')){
var latitude = localStorage.getItem('dm-latitude');
var longitude = localStorage.getItem('dm-longitude');
if(latitude!='' && longitude!=''){
$('.dm-clone-btn').addClass('dm-none');
$('.dm-oroginal-btn').removeClass('dm-none');
}else{
$('.dm-clone-btn').removeClass('dm-none');
$('.dm-oroginal-btn').addClass('dm-none');
}
}
$('#dm-latitude').val(latitude);
$('#dm-longitude').val(longitude);
var myLatLng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 15,
center: myLatLng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var markers = [];
var marker = new google.maps.Marker({
position: myLatLng,
draggable:true,
title: latitude+', '+longitude
});
markers.push(marker);
marker.setMap(map);
google.maps.event.addListener(map,'click',function(event) {
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true,
title: event.latLng.lat()+', '+event.latLng.lng()
});
markers.push(marker);
localStorage.setItem('dm-latitude',event.latLng.lat());
localStorage.setItem('dm-longitude',event.latLng.lng());
$('#dm-latitude').val(event.latLng.lat());
$('#dm-longitude').val(event.latLng.lng());
$('.dm-clone-btn').addClass('dm-none');
$('.dm-oroginal-btn').removeClass('dm-none');
});
google.maps.event.addListener(marker, 'dragend', function(event) {
markers.push(marker);
localStorage.setItem('dm-latitude',event.latLng.lat());
localStorage.setItem('dm-longitude',event.latLng.lng());
$('#dm-latitude').val(event.latLng.lat());
$('#dm-longitude').val(event.latLng.lng());
$('.dm-clone-btn').addClass('dm-none');
$('.dm-oroginal-btn').removeClass('dm-none');
} );
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
// more details for that place.
searchBox.addListener('places_changed', function() {
console.log('search ma');
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
map: map,
draggable:true,
position: place.geometry.location
}));
console.log(place.geometry);
localStorage.setItem('dm-latitude',place.geometry.viewport.Za.i);
localStorage.setItem('dm-longitude',place.geometry.viewport.Ua.i);
$('#dm-latitude').val(place.geometry.viewport.Za.i);
$('#dm-longitude').val(place.geometry.viewport.Ua.i);
$('.dm-clone-btn').addClass('dm-none');
$('.dm-oroginal-btn').removeClass('dm-none');
// console.log(place.geometry.viewport);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
You are using undocumented properties: place.geometry.viewport.Za.i and place.geometry.viewport.Ua.i.
Don't do that (those property names can and do change).
I certainly wouldn't expect any property of the viewport to be related to the actual location of a place (they are likely the north east and south west corners of a bounding box associated with the place.
// more details for that place.
searchBox.addListener('places_changed', function() {
console.log('search ma');
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
map: map,
draggable:true,
position: place.geometry.location
}));
console.log(place.geometry);
localStorage.setItem('dm-latitude',place.geometry.location.lat());
localStorage.setItem('dm-longitude',place.geometry.location.lng());
$('#dm-latitude').val(place.geometry.location.lat());
$('#dm-longitude').val(place.geometry.location.lng());
$('.dm-clone-btn').addClass('dm-none');
$('.dm-oroginal-btn').removeClass('dm-none');
// console.log(place.geometry.viewport);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
I want to add two differente marker with different icon in Google map
but when I choose one the second marker icon is replaced per the first icon .
example : When I click on point a mark should be added to the map and when I click on Restau another marker should be added to the map with different marker , but i got markers with the same icon
Any solutions please ?
map.addListener('click', function (e) {
$(".point").on("click", function () {
pointClicked = true;
restauClicked = false;
});
$(".restau").on("click", function () {
restauClicked = true;
pointClicked = false;
})
var icons = {
iconLocalise: {
url: "assets/img/localise.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
},
iconRestau: {
url: "assets/img/map-icone.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
}
};
$("#savePoint").on("click", function () {
if (pointClicked == true) {
placeMarkerAndPanTo(e.latLng, map, icons.iconLocalise)
}
if (restauClicked == true) {
placeMarkerAndPanTo(e.latLng, map, icons.iconRestau)
}
});
});
}
function placeMarkerAndPanTo(latLng, map, icon) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: icon
});
icon = null;
marker = null;
alert(JSON.stringify(icon));
map.panTo(latLng);
}
You can use an if-else statement that checks the value of the elements you clicked to determine the icon that you will use in the map. You can refer to the sample code I created that uses different marker every time I change the status of the switch from 'Default' to 'Restau'.
Here is a snippet of the if else statement I used in a code.
var iconLook;
//setting condition that check for the value of the Switch to determine the icon
if (switchStatus.checked) {
iconLook = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
} else {
iconLook = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
}
//passing the value of the icon in the new marker that is being created
var marker = new google.maps.Marker({
position: latlng,
icon: iconLook,
map: map
});
I'm using the following JavaScript code to display Google Maps in my ASP.Net website. With this code I have added Google Places search that suggests results/places as the user types. I am displaying properties based on the searched location. However, I would like to display markers of the searched properties as well. I found a solution here: http://www.dotnetbull.com/2013/06/multiple-marker-with-labels-in-google.html but considering my limited knowledge of JavaScript I wasn't able to integrate it with my existing code to display places search along with markers on Google Maps. If you could please help me get it working I'll be thankful.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript">
function LoadGoogleMAP() {
//Gets value of latitude and longitude of the search location from txtLatitude and txtLongitude textboxes.
var lat = document.getElementById('<%=txtLatitude.ClientID%>').value;
var lon = document.getElementById('<%=txtLongitude.ClientID%>').value;
var myLatlng = new google.maps.LatLng(lat, lon)
var markers = [];
var mapOptions = {
center: myLatlng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Create the search box and link it to the UI element.
var input = (document.getElementById('MainContent_txtSearch'));
map.controls[google.maps.ControlPosition.CENTER].push(input);
var searchBox = new google.maps.places.SearchBox((input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function () {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
</script>
Try this code from Official Google Doc:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am using the Google Maps Javscript API :
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
var image = {
url: places[0].icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for the closest result
marker = new google.maps.Marker({
map: map,
icon: image,
draggable : true,
title: places[0].name,
position: places[0].geometry.location
});
$('#inputLocalisation').val(places[0].geometry.location);
markers.push(marker);
bounds.extend(places[0].geometry.location);
map.fitBounds(bounds);
});
This handler is triggered when the user searches a location. It creates a marker on the closest result.
I would like to return the marker to use it later in an other handler :
google.maps.event.addListener(marker,'dragend',function() {
$('#inputLocalisation').val(marker.getPosition());
});
This one is triggered when the marker is dragged, but I need the marker object. How can I access the previously created marker?
So you should be adding that event listener at the same time as you're creating the marker I assume?
In the event listener function you can refer to it using the keyword this.
marker = new google.maps.Marker({
map: map,
icon: image,
draggable : true,
title: places[0].name,
position: places[0].geometry.location
});
google.maps.event.addListener(marker,'dragend',function() {
$('#inputLocalisation').val(this.getPosition());
});
Here I have a code that works fine, so here is simple google places code that show me a places based on location and I add an label on every marker so:
http://jsbin.com/UqafeCI/4/edit - CODE and DEMO
Now I want to in label show opening time so I add to my code:
if (!!place.opening_hours.periods[1].open.time) open = place.opening_hours.periods[1].open.time;
and now my code looks like this:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
//THIS CODE I ADD TO PREVIOUS CODE THAT WORK, so if there is open time to show in label
var open = 'No work time';
if (!!place.opening_hours.periods[1].open.time) open = place.opening_hours.periods[1].open.time;
// Create a marker for each place.
var marker = new MarkerWithLabel({
map: map,
icon: image,
title: place.name,
position: place.geometry.location,
labelContent: open,
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
labelAnchor: new google.maps.Point(22, 0)
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
So how I can show open time of an object on label if time exist???
UPDATE:
I try to add request and service.getDetails function but again I cant get opening_time:
CODE:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var request = {
reference: place.reference
};
service.getDetails(request, function(place, status) {
var open = null;
try{
open = place.opening_hours.periods[1].open.time;
}
catch(e){
open='No work time';
}
var otvoreno = place.openNow+"</br>"+place.name;
// Create a marker for each place.
var marker = new MarkerWithLabel({
map: map,
icon: image,
title: place.name,
position: place.geometry.location,
labelContent: open,
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
labelAnchor: new google.maps.Point(22, 0)
});
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
Use a try-catch-statement:
try{
open = place.opening_hours.periods[1].open.time;
}
catch(e){
open='No work time';
}
...otherwise you will get an error when any of following is undefined:
place.opening_hours
place.opening_hours.periods
place.opening_hours.periods[1]
place.opening_hours.periods[1].open
But however, the documentation seems to be misleading, it suggests that the returned results are placeDetails. But that's not the fact , you need a further request for each place to request the placeDetails(which will contain the opening_hours.periods, when available)