I am using this library in my app to load the Google map on the web using this answer as a reference, I am able to add the marker on it but wondering how I can do the marker on tap action
Adding marker:
final _icon = jsMap.Icon()
..scaledSize = jsMap.Size(60, 60)
..url = 'https://www.freeiconspng.com/thumbs/pin-png/pin-png-9.png';
final marker = jsMap.Marker(
jsMap.MarkerOptions()
..position = latLng1
..map = map
..title = 'Test Title1'
..icon = _icon
);
I am able to do the on click action using the below code:
final infoWindow =
jsMap.InfoWindow(jsMap.InfoWindowOptions()..content = 'This is the content inside the Info window');
marker.onClick.listen((event) => infoWindow.open(map, marker));
It may help someone!
Related
I have a map of bing maps and I use has created pushpin do with double click. And now I want to make limits pushpin only <= 20.
If it has been over the limit point is then automatically pushpin cannot be displayed. Although double click in map.
But I don't understand how to create it. Can you help me? Thanks a lot. Gbu.
My code to show pushpin
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Microsoft.Maps.Events.addHandler(map, 'dblclick',getLatlng );
}
//show pushpin
function getLatlng(e) {
if (e.targetType == "map")
{
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var locTemp = e.target.tryPixelToLocation(point);
var location = new Microsoft.Maps.Location(locTemp.latitude, locTemp.longitude);
alert(locTemp.latitude + "&" + locTemp.longitude);
var pin = new Microsoft.Maps.Pushpin(location, { 'draggable': false });
map.entities.push(pin);
alert("Done");
Microsoft.Maps.event.addListener(map, 'click', function (event)
{
}
// limit pushpin
*How to create limit pushpin?*
In the getlatlng function you can do a simple check to see how many shapes are on the map. You can get the number of shapes on the map in your application by doing the following:
var cnt = map.entities.getLength();
I am creating a map page with a single image,
and I would like to use GeoLocation to show where the user is as a blue dot (somewhat like iOS maps).
I already have the JavaScript for finding the location, and it works great.
I just need help with how to place a marker - just a simple image - on the page according to the output of position.coords.latitude and position.coords.longitude.
Is there any way that this can be done, and if so, how?
Thanks in advance.
You can simply use GMarker in your javascript, something like this:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
You can customize its image like that:
var image = 'beachflag.png';
marker.icon = image;
I've an issue with the leaflet openPopup method.
showMap = function(elements) {
var jsonp = 'http://a.tiles.mapbox.com/v3/blahblahblah.jsonp';
var m = new L.Map("my_map").setView(new L.LatLng(51.5, -0.09), 15);
var geojsonLayer = new L.GeoJSON();
var PlaceIcon = L.Icon.extend({
iconSize: new L.Point(25, 41),
shadowSize: new L.Point(40, 35),
popupAnchor: new L.Point(0, -30)
});
var icon = new PlaceIcon(__HOME__ + '/images/leaflet/marker.png');
var marker;
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
if (i == 0) {
marker.openPopup();
}
m.addLayer(geojsonLayer).addLayer(marker);
}
// Get metadata about the map from MapBox
wax.tilejson(jsonp, function(tilejson) {
m.addLayer(new wax.leaf.connector(tilejson));
});
}
When I click on a marker I have the popup open. But I would like to have the first popup open when the map is loaded. (and open other popups on markers click)
AnNy ideas ?
Put openPopup call after you add the marker to the map and you should be fine.
I'm assuming that when you click on a marker you see the popup but you're not getting the popup of the first marker to show automatically when the map is loaded?
First, it doesn't look like you're actually using GeoJSON so a GeoJSON layer isn't necessary (you can just use a FeatureLayer) but that shouldn't cause any issues. Whatever layer group you use you should only be adding it to the map once and then adding all child layers to the LayerGroup. You're currently adding the geojsonLayer multiple times in your "for" loop which you don't want to do.
Second, you have to call marker.openPopup() after the marker is added to the map.
Try changing your code around to looks something like this:
var layerGroup = new L.FeatureGroup();
layerGroup.addTo( m );
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
//You don't add the marker directly to the map. The layerGroup has already
//been added to the map so it will take care of adding the marker to the map
layerGroup.addLayer( marker );
if (i == 0) {
marker.openPopup();
}
}
I had this issue and fixed it with adding a timeout right after I added the marker on the map.
marker.addTo(this.map).bindPopup('Info');
setTimeout(() => {
marker.openPopup();
}, 500);
I don't know why but on some page, I need to apply timeout. In any case it's my workaround, hope this works for some of you too.
First add your map then put openPopup():
L.marker([lat, long]).bindPopup('Your message').addTo(map).openPopup();
I have a probably rather basic problem in OpenLayers, it would be really great if someone could help me out on this one.
I have an array of markers, which should each have a different popup box text. However, I fail in applying the according text to a marker. I tried to do this via another array for the content of the popup boxes. However, i couldn't relate the correct text to a marker. Here is my code:
var vs_locations = [
[13.045240, 47.8013271],
[13.145240, 47.8013271],
[13.245240, 47.8013271],
];
var popupContentHTML = [
"Text for marker with loc[0]",
"Text for marker with loc[1]",
"Text for marker with loc[2]"
];
function addVS(){
for (var i = 0; i < vs_locations.length;i++){
var loc = vs_locations[i];
var feature = new OpenLayers.Feature(volksschulen, new OpenLayers.LonLat(loc[0],loc[1],loc[2]).transform(proj4326,proj900913));
feature.closeBox = true;
feature.data.icon = new OpenLayers.Icon('coffeehouse.png');
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true,
});
marker = feature.createMarker();
volksschulen.addMarker(marker);
feature.data.popupContentHTML = ; //Here should be the text according to the marker
feature.data.overflow = "auto";
marker.events.register("mousedown", feature, markerClick);
feature.popup = feature.createPopup(feature.closeBox);
map.addPopup(feature.popup);
feature.popup.hide();
}
}
did you try:
feature.data.popupContentHTML = popupContentHTML[i];
assuming the length of your location array matches your text array, both in length anf position
I'm working on a GWT app that's using Google Maps. I'm trying to add many lettered markers to my map. Originally, I had:
Marker marker = new Marker(point);
marker.setImage("http://www.google.com/mapfiles/markerA.png");
map.addOverlay(marker);
But that didn't work. The call to setImage caused an exception in the maps API and nothing showed up on the map. I searched and found some half-answers talking about MarkerOptions, so I tried:
Icon icon = Icon.newInstance(Icon.DEFAULT_ICON);
icon.setImageURL("http://www.google.com/mapfiles/markerA.png");
MarkerOptions ops = MarkerOptions.newInstance(icon);
ops.setIcon(icon);
Marker marker = new Marker(point, ops);
map.addOverlay(marker);
This was a bit better in that my app was not throwing exceptions anymore and I was seeing marker shadows, but still no custom marker images.
I would prefer a non-JSNI solution to this problem.
Thanks!
This sample seems to cover what you want to achieve: IconDemo.java.
// Create our "tiny" marker icon
Icon icon = Icon.newInstance(
"http://labs.google.com/ridefinder/images/mm_20_red.png");
icon.setShadowURL("http://labs.google.com/ridefinder/images/mm_20_shadow.png");
icon.setIconSize(Size.newInstance(12, 20));
icon.setShadowSize(Size.newInstance(22, 20));
icon.setIconAnchor(Point.newInstance(6, 20));
icon.setInfoWindowAnchor(Point.newInstance(5, 1));
MarkerOptions options = MarkerOptions.newInstance();
options.setIcon(icon);
// LatLng point; MapWidget map;
map.addOverlay(new Marker(point, options));
The live demo can be seen here: http://gwt.google.com/samples/HelloMaps-1.0.4/HelloMaps.html#Creating%20Icons
Here's my new working solution (thx again igro):
Icon icon = Icon.newInstance("http://www.google.com/mapfiles/markerA.png");
icon.setIconSize(Size.newInstance(20, 34));
MarkerOptions ops = MarkerOptions.newInstance(icon);
Marker marker = new Marker(point, ops);
map.addOverlay(marker);
Here is my code in 3.10 Version
LatLng centerIcon = LatLng.newInstance(-25.90307367246304, -48.82550597190857);
MarkerImage markerImage = MarkerImage.newInstance("http://someIcon.png");
MarkerOptions mOpts = MarkerOptions.newInstance();
mOpts.setIcon(markerImage);
mOpts.setPosition(centerIcon);
Marker marker = Marker.newInstance(mOpts);
marker.setMap(mapWidget);