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.
Related
I have added Google Maps for Flutter
i know how to add a marker as it is given clearly in there examples
MarkerOptions _options = new MarkerOptions(
position: LatLng(
driver_lat,
driver_lng,
),
infoWindowText:
const InfoWindowText('An interesting location', '*'));
Marker marker = new Marker('1', _options);
//Adding Marker
googleMapController.addMarker(_options);
And i am removing the marker like below
googleMapController.removeMarker(marker);
for adding the marker it is taking MarkerOptions object as a parameter but for removing the marker it is asking for Marker object as parameter and my removing marker code is not working.
i am getting the below error
Failed assertion: line 201 pos 12: '_markers[marker._id] == marker': is not true.
There are two ways to do this, one is via clearMarkers() Method
mapController.clearMarkers();
Another one is via targeting each marker returned by mapController.markers
mapController.markers.forEach((marker){
mapController.removeMarker(marker);
});
2020 answer:
.clearMarkers() has been deprecated as now each Marker is a Widget stored in a map. The correct way to clear all of the markers now on your Google Map is to set the state of of your marker Map to an empty map.
e.g.
...
onPressed: () {
setState(() {
gMapMarkers = {};
});
}
....
Use clearMarkers(). It will clear all markers in your map. So try googleMapController.clearMarkers();
I've came across this issue myself with the google_maps_library and the main cause of this issue '_markers[marker._id] == marker': is not true. is the fact that all GoogleMapsController methods return a Future, so this error is, let's say a concurrency issue since the method cals are async.
The correct way to add/remove a marker would be:
_testRemoveMarker() async {
Marker marker = await _mapController.addMarker(...markerOption..);
_mapController.removeMarker(marker);
}
_clearMarkersAndRead() async {
_mapController.clearMarkers().then((_) {
//TODO: add makrers as you whish;
});
}
So, if you do any operations with the markers add/remove/update, you should be sure that the previous operation that involved markers is completed.
If anyone still struggling with removing a specific marker try this method;
MarkerId id = MarkerId("Pickup");
//markers[id] = {} as Marker; clear all markers
markers.removeWhere((key, value) => key == id); //clear a specific marker
I have a web app with a map in it. I've added a nice little custom map control to turn on and off different layers on the map. Currently there are only two layers, and it all works nice and fine in most browsers.
Except for IE8+7. None of the layers are showing on the map when turned on. As far as I can tell the map is loading the kmz/kml files (when preserveViewport is set to false, the map moves to the right location) but they're just not appearing. One layer contains polylines, and the other contains markers. The code I use is below:
function someFunction() {
//code to initialise map etc goes here...
var layers = [];
//Create 1st layer
var exchangeslayer = new google.maps.KmlLayer('http://link.to.file/exchanges.kmz'
suppressInfoWindows: true,
preserveViewport: true
});
layers.push({name: "Exchanges", layer: exchangeslayer});
//Code to create second layer
var nyclayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml'
suppressInfoWindows: true,
preserveViewport: false
});
layers.push({name: "NY City Tracks", layer: nyclayer});
addCustomLayerControls(layers);
}
function addCustomLayerControls(layers) {
//there is code here that would generate the divs for the custom map control
var container; //container is a div element created via javascript
for (var i = 0; i < layers.length; i++) {
this.addLayerLabelToContainer(layers[i], container);
}
//some more code
}
function addLayerLabelToContainer(layer, container) {
var map; //Assume I get a reference to the map
//some code here to make pretty labels for the map controls...
var layerLabel; // layerLabel is a div element created via javascript
google.maps.event.addDomListener(layerLabel, 'click', function() {
if(layer.layer.map == null) {
layer.layer.setMap(map);
} else {
layer.layer.setMap(null);
}
});
}
So as it turns out my problem related to CSS. One of my stylesheets was applying max-width: 100% to all img tags. This was playing havok with the map markers/polylines.
Its obvious now that I see it, but when you think the problem is to do with the javascript its not so obvious. As such, I'll leave this answer here for anyone else who makes the same mistake as me.
If you modify addLayerLabelToContainer() like this then it works in IE as expected. Verified it loads KMZ correctly in IE 8 and 9.
function addLayerLabelToContainer(layer, container) {
// var map; //Assume I get a reference to the map
//some code here to make pretty labels for the map controls...
var layerLabel; // layerLabel is a div element created via javascript
if(layer.layer.map == null) {
layer.layer.setMap(map);
} else {
layer.layer.setMap(null);
}
}
Don't need to invoke addDomListener(). Also note the API syntax:
addDomListener(instance:Object, eventName:string, handler:Function)
Also minor fix of syntax errors in someFunction as follows:
function someFunction() {
// var map; //assume map is initialised, I've just removed that code
var layers = [];
// see https://developers.google.com/maps/documentation/javascript/layers
//Create 1st layer
var exchangeslayer = new google.maps.KmlLayer(
'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/simple/big.kmz',
{ suppressInfoWindows: true, preserveViewport: true
});
layers.push( {name: "Exchanges", layer: exchangeslayer} );
// ...
addCustomLayerControls(layers);
}
im trying to set the center of my google maps to my 2 defined Markes with Google Map Api V3.
But it centers just the first marker, the locationmarker.
i have this code that renders a map:
openShops : function(data) {
if (Ext.ComponentManager.get('shops-details') == undefined) {
Ext.create('Oxfam.view.ShopsDetails');
}
var shopsDetailsPage = Ext.ComponentManager.get('shops-details');
Ext.Viewport.setActiveItem(shopsDetailsPage);
var bounds;
var map = Ext.create('Ext.Map', {
id : 'shopMap',
xtype : 'map',
useCurrentLocation : {
autoUpdate : false
},
listeners : {
maprender : function(comp, map) {
var image = 'img/oxfamLogoSmall.png';
var locationMarker = new google.maps.Marker({
position : new google.maps.LatLng(this._geo
.getLatitude(), this._geo.getLongitude()),
map : map
});
var shopCoord = new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude'));
var locCoord = new google.maps.LatLng(this._geo
.getLatitude(), this._geo.getLongitude());
bounds = new google.maps.LatLngBounds();
var shopMarker = new google.maps.Marker({
position : new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude')),
map : map,
icon : image
});
bounds.extend(shopCoord);
bounds.extend(locCoord);
console.log(shopCoord);
map.fitBounds(bounds);
},
}
});
shopsDetailsPage.setItems(map);
}
The log logs the right coordinates.
The map shows this:
click here to see the map
but my wish is like this:
click here to see my wish
I dont know what to do, i mean im searching for an solution since hours, but every solution in the net isnt working in my application..
Anyone have any idea what I'm doing wrong?
I hope im posting every information you need to help my weak development experience ;)
This looks to me like you've got latitude and longitude the wrong way round:
var shopCoord = new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude'));
And again here:
var shopMarker = new google.maps.Marker({
position : new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude')),
map : map,
icon : image
});
If this is the case (and you've not just mis-labelled the variables in your 'sessionStorage' object) then this will affect the bounds, which is possibly the problem.
Got the Answer.
Thanks for everyone.
The Problem was, that
useCurrentLocation : {
autoUpdate : false
},
automatically centers the locationMarker.
I solved ist by using the html5 geolocation without the sencha touch implemented location method.
Thanks for helping guys!
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.
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!');
}