I want to map a location, fill it's adress into an input field and add a marker.
Currently I have this, which works:
var home = new google.maps.LatLng(49.93547768118736, 11.2954580783844);
$('#map_canvas_1').gmap({'center': home, 'zoom':17 });
$('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP } );
$('#map_canvas_1').gmap('search', { 'location': home }, function (results, status) {
$('#to').val(results[0].formatted_address);
});
What I'm wondering is why I cannot use a callback function to fill the input field like so:
$('#map_canvas_1').gmap({'center': home, 'zoom':17, 'callback': function() {
$('#map_canvas_1').gmap('search', { 'location': home }, function (results, status) {
$('#to').val(results[0].formatted_address);
});
} });
As a matter of fact, not even this works:
$('#map_canvas_1').gmap({'center': home, 'zoom':17, 'callback': function() {
alert ("callback");
} });
Can somebody tell me what I'm doing wrong?
There is no property 'callback' in MapOptions, so you cannot set it.
As I understood, you need a callback event, when the map is finally loaded. If I'm mistaken, please correct me. There is the "idle" event can be used to achieve it. I'm quite new with Google Maps and couldn't find another solution to fire a callback. If it helps, I will be glad. Sorry that the answer came for several years late, maybe other people will find it useful.
idle: function() {
alert('Done!');
}
Related
I'm Using map_view to display google map on flutter app. The map is displaying.The problem is that,markers are not showing here is the code.
_openGooleMap() {
mapView.addMarker(new Marker("1", "George", -6.7244448, 34.8536052, color: Colors.red)); //Doesn't work
mapView.onMapTapped.listen((location) => print("Touched location $location")); // Works
mapView.show( // Works
new MapOptions(
showUserLocation: true,
title: "MAP",
initialCameraPosition:
new CameraPosition(new Location(-6.7244448, 34.8536052), 6.0)),
toolbarActions: <ToolbarAction>[new ToolbarAction("X", 1)]);
mapView.onToolbarAction.listen((id) {
if (id == 1) {
mapView.dismiss();
}
});
}
What I might be doing wrong here?
I Managed to figure it out.. The Issue is that, I was setting the markers before the map initialization is completed.
mapView.onMapReady.listen((_) {
mapView.setMarkers(_markers);
});
You have to wait until map load. set a listener.
mapView.onMapReady.listen((_) {
mapView.setMarkers(_markers);
});
I found a simple example of a marker here.
I'm teasing google places API and I run into strange behavior at Autocomplete that I don't understand.
This is how I'm using it:
const AUTOCOMPLETE_OPTIONS = {
types: ['address'],
componentRestrictions: {
country: 'cz'
}
};
this.inputPlaceElement = $('#search-around-input')
this.inputPlaceSearchBox = new google.maps.places.Autocomplete(this.inputPlaceElement[0], AUTOCOMPLETE_OPTIONS);
google.maps.event.addListener(this.inputPlaceSearchBox,'places_changed', () => {
console.log('place change')
})
Autocomplete input is working as it should but place_changed is not triggered, I was trying some stuf with it, and the object that is returned from constructor is weird.
When I call methods getBounds() or getPlace() there are undefined
This is the object: I'm not sure what is wrong
The event triggered when a Place is selected is 'place_changed', while your sample uses 'places_changed'
Try:
google.maps.event.addListener(this.inputPlaceSearchBox,'place_changed', function() {
console.log('place change')
});
I've been doing mobile part of my project after "completing" the web part. I'm using google map api. I have coded following:
function codeAddress() {
var image = 'images/tickmark1.png';
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 markerZad = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "NEW TASK",
icon: image
});
document.getElementById('latitude').value =results[0].geometry.location.nb.toPrecision(9);
document.getElementById('longitude').value=results[0].geometry.location.ob.toPrecision(9);
document.getElementById('adrs').value=document.getElementById('address').value;
document.getElementById('latit').value =results[0].geometry.location.nb.toPrecision(9);
document.getElementById('longit').value=results[0].geometry.location.ob.toPrecision(9);
alert("Ustalono wspolrzedne nowego zadania. Wybierz pracownika \n (PPM usuwa znacznik)");
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
google.maps.event.addListener(markerZad, 'click', function() {
alert("Nowe zadanie: \n"+ address + "\n"+"Wybierz pracownika \n (PPM usuwa znacznik)");
map.setZoom(14);
map.setCenter(this.getPosition());
});
google.maps.event.addListener(markerZad, 'rightclick', function() {
markerZad.setMap(null);
document.getElementById('latitude').value =0;
document.getElementById('longitude').value=0;
document.getElementById('adrs').value=0;
document.getElementById('latit').value =0;
document.getElementById('longit').value=0;
document.getElementById('ajdideva').value="X";
document.getElementById('iddev').value=0;
document.getElementById('baton').disabled=true;
alert("Usunieto znacznik. Wpisz inny adres.");
});
});
}
Let's leave behind the level of this code. I'm sure it's a bad one. But the thing is...it used to work for me like few days ago. Now it doesn't. And yes, I haven't touched it since then... I figured out myself, that the problem causes "results". I get status==OK, then it places a marker in a correct spot, and then...nothing happens. I mean my inputs in html file don't get their values changed and +listeners aren't working. When I changed "results[0]." etc to simple string, it worked, that's why I think that there's a problem with results[0]. Any suggestions please?
Don't access undocumented properties like e.g. results[0].geometry.location.nb . The names of these properties may(and will) change. To access the values of these properties use the documented methods, e.g. lat() to access the latitude of a LatLng-instance:
document.getElementById('latitude').value
= results[0].geometry.location.lat().toPrecision(9);
I have tried everything possible.. unminified all javascript, still can't get the map to load properly inside the tab.
Trying to use this custom code too with no success
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
});
}
});
webpage: http://bit.ly/UTHskS
thanks in advance,
Andy
I think you might need to trigger the Resize event to the map when the tab opens.
google.maps.event.trigger(map, "resize");
I didn't try though, this code would solve the problem.
Please try this code.
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
setTimeout(function(){
if (mapp0) {
google.maps.event.trigger(mapp0.getMap(), "resize");
}
}, 1000);
});
}
});
I have the following problem.
On my google map app I need to distinguish click and doulbe click on the markers.
So when I am creating markers I create two listeners:
google.maps.event.addListener(markerTMP, 'click', (function(routeID) {
return function() {
console.log('click '+routeID);
}
})(pointRoute));
google.maps.event.addListener(markerTMP, 'dblclick', (function(routeID) {
return function() {
p('double click '+routeID);
}
})(pointRoute));
The problem is that when I use double click, click is also used.
My idea how to handle this:
On click - create a timeout, on double click - delete it.
But is there a normal way to handle this?
I was not able to found it in API reference.
Here is my workaround. it uses a global var to work across the two functions. Not the most eloquent, but works.
google.maps.event.addListener(marker, 'click', function() {
x = 0
update_timeout = setTimeout(function(){
if (x == 0) {
// do something ;
};
}, 300);
});
google.maps.event.addListener(marker, 'dblclick', function() {
x=1
// do something ;
});
There is no "official" way to handle this in the API. Creating a timeout seems to be the accepted approach.
Try using a click event and a rightclick event instead of click and dblclick.