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)
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 trying to make an algorithm that show only markers in a given radius this is my code:
for( i = 0; i < markers.length; i++ ) {
d = google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(user_logged_in[0][0],user_logged_in[0][1]),
new google.maps.LatLng(markers[i][0], markers[i][1]));
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = {url:"http://".concat(markers[i][3]),
scaledSize: new google.maps.Size(20, 20), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) };
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon,
url:'im:<sip:'+markers[i][6]+'>'
});
if(<?=$this->translate($this->layout()->is_super_admin)?>==0){
marker.setVisible(false);
$(document).ready(function() {
$('#select-distance').change(function() {
var e = document.getElementById("select-distance");
var value = parseInt(e.options[e.selectedIndex].value);
if(d < value){
marker.setVisible(true);
}else{
marker.setVisible(false);
}
circle.setRadius(value);
circle.bindTo('center', markerc, 'position');
find_closest_marker(value);
});
});
}
}
But when I test it, it works only for the last user in the given radius. For example, if I have 3 users with distances 2km, 3km, 1km and I select a radius of 5km I get only the user with 3 km!!! Thanks for help.
Make new object of each marker and use that object.
See Below:
//here use the var keyword and a new marker object
var marker[i] = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon,
url:'im:<sip:'+markers[i][6]+'>'
});
if(<?=$this->translate($this->layout()->is_super_admin)?>==0){
marker[i].setVisible(false);
$(document).ready(function() {
$('#select-distance').change(function() {
var e = document.getElementById("select-distance");
var value = parseInt(e.options[e.selectedIndex].value);
if(d < value){
marker[i].setVisible(true);
}else{
marker[i].setVisible(false);
}
circle.setRadius(value);
circle.bindTo('center', markerc, 'position');
find_closest_marker(value);
});
});
You are using the same object each time so it is replacing previous one. That's why it is drawing only last one marker.
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());
});
i have put the google map java script code in my site and it does not working.Here is the code
function map_initialize() {
var latlng = [
__lats_and_langs__
];
if (google.maps.BrowserIsCompatible()) {
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=15|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
map = new google.maps.Map2(document.getElementById('salon_map'));
map.addControl(new google.maps.LargeMapControl3D());
map.addControl(new google.maps.MenuMapTypeControl());
map.setCenter(new google.maps.LatLng(0, 0), 0);
for (var i = 0; i < latlng.length; i++) {
var marker = new google.maps.Marker({
position: latlng[i],
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
//var marker = new google.maps.Marker(latlng[i]);
map.addOverlay(marker);
}
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
latlngbounds.extend(latlng[i]);
}
map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
map.setZoom(12);
// put markers and custom icon ??
__marker_list__
}
}
// google.maps.Event.addDomListener(window, 'load', map_initialize);
google.maps.Event.addDomListener(window, 'unload', google.maps.Unload);
Url is : http://myshopsalon.com/find-a-shop-salon
The markers are there(you may have noticed the single marker in the top-left corner of the map, it's not 1 marker, all these markers are placed at this location)
Reason: you are using the Maps-Library V2, but you create the Markers with the arguments expected in V3.
In V2 the 1st expected argument is the LatLng, nothing else.
var marker = new google.maps.Marker(latlng[i],{/*markerOptions*/});
(I've ommitted the options, because you've done the same mistake with the icon )
To clarify: When you use V2, you must use the methods as described here: https://developers.google.com/maps/documentation/javascript/v2/reference