I am showing custom marker with click event on it. It shows information when I clicked but the info window is not showing well. I used some css in it. I also need to customize it further. This map is shown in phonegap app in iPhone (iOS 5). Every other thing working find (including direction, GPS).
I have used google map js v3 API.
I got this output.
How to show correct infoWindow? And customize as my need.
here is the code
function setMap(myLat, myLng){
// Define Marker properties
var image = new google.maps.MarkerImage('images/pick.png',
new google.maps.Size(30, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 9,36.
new google.maps.Point(9, 36)
);
var my_place = new google.maps.LatLng(myLat, myLng);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: my_place
}
mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
mer_marker = new google.maps.Marker({
position: my_place,
map: mer_map,
clickable : true,
animation: google.maps.Animation.DROP,
icon: image
});
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(mer_marker, 'click', function(event) {
infowindow.open(mer_map,mer_marker);
});}
Give this a try. I had a similar problem with phonegap and google maps.
#map_canvas img {
max-width: none;
}
Related
I generated a list of Maki Icons I want to use via the original icon editor.
drawMarkers() {
let self = this;
const mapboxgl = require("mapbox-gl");
let data = this.draw.getAll();
data.features.forEach((feature) => {
if (feature.geometry.type == "Point") {
var icon = feature.properties.icon;
var title = feature.properties.title;
if (typeof title === "undefined") {
title = "Info";
} else {
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(`<h3>${title}</h3>`);
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
.setLngLat(feature.geometry.coordinates)
.setPopup(popup)
.addTo(self.map);
}
});
The Markers are showed correctly on the Mapbox.
The GeoJSON is like this:
"type":"FeatureCollection",
"features":[
{
"id":"c749de6a6eac6b1cfdda890e7c665e0d",
"type":"Feature",
"properties":{
"icon":"ferry",
"title":"This should show a Ferry icon",
"portColor":"#d9eb37"
},
"geometry":{
"coordinates":[
6.12,
22.44
],
"type":"Point"
}
},
I want the Maki Icons also added in the Marker, but I cannot find any documentation of how icons can be used inside the Mapbox Marker.
Who can help me out? I'm using the Mapbox GL JS for Web.
It depends on how you've created your map. You can either:
Create your own map style using the Maki icons you've generated. This is done using the Mapbox studio to create your custom map style, then adding it to your application.
Create custom markers that use the maki .svg files you've created. This can be done by passing a custom element to the new mapboxgl.Marker() function. So, instead of:
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
you would pass:
var marker = new mapboxgl.Marker(customElement)
where customElement uses the data from your icons variable.
I'm not sure if you're using plain JS here, but there's some examples on the mapbox docs of ways you can do this.
Because you've generated your own list of Maki icons, I'd suggest downloading them and maybe host them somewhere so that you can get away with creating your markers with <img src="link to hosted maki marker"/> or something of the sort
Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text.
I've created my custom icon marker like so:
var airfieldIcon = L.icon({
iconUrl: 'images/airfield.png',
iconSize: [48,48]
});
var airfield = L.geoJson (airfield, {
pointToLayer: function(feature,latlng){
return L.marker(latlng, {
icon: airfieldIcon
})
}
}).addTo(map);
How would I add the text "Banff Airfield" as a label to this icon? Is the easiest and most efficient way through using an image editor? if so, I will do that method, but wondering if there was a better way. Thanks!
You could use a L.DivIcon:
Represents a lightweight icon for markers that uses a simple div element instead of an image.
http://leafletjs.com/reference.html#divicon
Put your image and text in it's HTML, sprinkle some CSS to make it appear the way you want and you're good to go
new L.Marker([57.666667, -2.64], {
icon: new L.DivIcon({
className: 'my-div-icon',
html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
'<span class="my-div-span">RAF Banff Airfield</span>'
})
});
Another option is to use the Leaflet.Label plugin:
Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.
Repository: https://github.com/Leaflet/Leaflet.label
Example: http://leaflet.github.io/Leaflet.label/
As of leaflet version 1.0.0, you can add a label without using a plugin (the plugin has been rolled into the core functionality).
Example:
var marker = L.marker(latlng)
.bindTooltip("Test Label",
{
permanent: true,
direction: 'right'
}
);
This yields a marker on the map with a label of "Test Label" which is always displayed to the right of the marker's icon.
To further explore Mark's answer, if you want to know an easy way to add text (number) over a marker like this:
You just have to proceed as follows:
1. Instantiate an icon (map.js)
var stepIcon = L.icon({
iconUrl: 'graphic/yellow-circle.png', // the background image you want
iconSize: [40, 40], // size of the icon
});
2.1 Setting the icon (map.js)
var marker = new L.marker([39.5, 77.3], { icon:stepIcon});
marker.bindTooltip("12" //specific number, {
permanent: true,
direction: 'center',
className: "my-labels"
});
marker.addTo(map);
2.2 Setting the icon (map.css)
.leaflet-tooltip.my-labels {
background-color: transparent;
border: transparent;
box-shadow: none;
font-weight: bold;
font-size: 30px;
}
Make sure you have imported your .css file into your .html page.
this is out of box solution it may not suitable for everyone but it works for me
simply you can add marker of icon then marker of text Like this :
var MarkerIcon = L.icon(feature.geometry.properties.icon);
var MarkerText = L.divIcon(
{className: TextPositionClass,
html:'<div>'+ displayText+'</div>',
iconSize: null
});
let marker = L.marker(latlng, {icon: MarkerIcon}).addTo(this.map); // add marker
let label = L.marker(latlng, {icon: MarkerText}).addTo(this.map); // add text on marker
I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.
Leaflet is rendering because I can see all of its elements in the DOM, but nothing else comes to life. All I see is gray.
The only way I can get map tiles to appear is if I delete the position:absolute on the map container, but that creates a bunch of jumbled map tiles. I checked the GIT history to see if I accidentally changed a style, but no luck.
Here's the code initializing the map:
// init everything on page show
$("#map").live('pageshow',function() {
if(window.localStorage.getItem("lat")!=undefined) { var lat = window.localStorage.getItem("lat")} else { var lat = '49.264'; }
if(window.localStorage.getItem("lng")!=undefined) { var lng = window.localStorage.getItem("lng")} else { var lng = '-123.123'; }
try {
var map = window.map
map = new L.Map('map-container');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/006282296d334e66a593e55aca6b5ce0/54803/256/{z}/{x}/{y}.png';
var cloudmadeAttribution = 'Map Data © 2011 OpenStreetMap';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.setView(new L.LatLng(lat, lng), 12).addLayer(cloudmade);
map.invalidateSize();
} catch(e) {console.log(e)}
userMarkers[1] = new L.Marker( new L.LatLng( lat,lng ) , {icon: new iconUser, clickable: true} );
map.addLayer( userMarkers[1] );
});
The environment includes jQuery mobile. Unfortunately, the console does not log any errors and the localStorage above indeed holds valid LatLng values when I inspect it.
A screenshot:
Any guesses?
I'm not sure how the problem started, but to fix it I went and erased all map container styles and then declared:
#map-container {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: 0;
padding: 0;
}
And now the problem is fixed. I've never used such styling before so I cannot speculate on how the problem started.
I use Bing Maps Ajax V7. I want on right click to get an infobox and show my links inside.
function GetMap(){
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:""});
attachrightclick = Microsoft.Maps.Events.addHandler(map, 'rightclick',showPopupMenu);
}
function showPopupMenu(e){
var latlong = new Microsoft.Maps.Location(e.getY(),e.getX());
var defaultInfobox = new Microsoft.Maps.Infobox(latlong, {title: '<div>My Pushpin<div>', visible: true} );
map.entities.push(defaultInfobox);
}
Infobox added but unfortunately have no sense with to point I clicks... I adds on other latlon...
Have a anyone an idea:
1)How to make info window load on position where I right click.
2)Disable default right click of browser so only shows info box and not and right click menu
Thanks a lot.
Question number 1:
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'rightclick', displayEventInfo);
map.entities.push(pushpin);
function displayEventInfo(e){
var pushpin = e.target;
var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
var defaultInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), infoboxOptions );
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('html content goes here!');
}
Question number 2:
<body oncontextmenu="return false">
...
</body>