Develop Reference

Leafletjs show my location marker instead of hardcoded location

I am trying out Leaflet.js and I have a map with a marker like this:
var marker = new L.marker([5.897818, -1.120009],{
draggable: true,
autoPan: true
}).addTo(mymap);
This is showing ok but I want it to appear on my current location instead of the above hardcoded location.
How do I do this?

What you need is to tap into the Geolocation API and use the results of that to create a marker.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
navigator.geolocation.getCurrentPosition(position => {
const { coords: { latitude, longitude }} = position;
var marker = new L.marker([latitude, longitude], {
draggable: true,
autoPan: true
}).addTo(mymap);
console.log(marker);
})
There's some issue issue using the API with Stackoverflow, so here's a link to a working JSFiddle.

Control the zoom level of Google Mx

I've made a Wordpress website with a template tool 'beaver builder'. That tool has a google map module, but that doesn't work very well. For example, I can't change to zoom level and center.
I also want to show a specific marker in a cluster.
This is the website page: http://www.depot-rato.be/het-project/
Is there a way to control the google map with some Javascript or jQuery?
jQuery('.gmap').setZoom(19);
Thanks in advance.

I've found a solution:
jQuery(document).ready(function($) {
var aLocation = { lat: 51.009054, lng: 4.509285};
$('.gmap').gmap('get','map').setOptions(
{
'zoom': 18,
'center': aLocation
}
);
});

I do it like this(at map initialization, resets the map and markers):
var aLocation= { lat: 48.4728146, lng: 7.499930100000029 };
map = new google.maps.Map(document.getElementById('myMap'), {
zoom: 5,
center: aLocation,
title: 'myMapTitle',
});
or like this(this one shouldn't initialize the map or markers):
map.setZoom(5);
map.setCenter(aLocation);
map.panTo(aLocation);// no need for this one, if you used the one above
You can try it here(click on the marker):
https://codepen.io/sam67/pen/KRGLjY

Leaflet map "center" option not working

I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?

I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.

Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?

Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}

antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details

Mouseover from Fusion table

I have a website (www.auscem.com) with a link below the table to a Fusion table map. Currently, markers on the map are clickable to get the infoWindow, but I would like to make them mouseover instead. The present script is (slightly abbreviated):
var map;
var layer;
var tableid = xxxxxxx;
function load()
{
map = new google.maps.Map(document.getElementById('mapDiv'),
{
center: new google.maps.LatLng(-25.274, 133.775),
zoom: 4, //zoom
mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
});
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows: false});
layer.setQuery("SELECT 'Latitude' FROM " + tableid);
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event)
{
document.getElementById('siteInfo').innerHTML = event.infoWindowHtml;
});
}
// execute this
window.onload = load;
I've tried all sorts of things,, but have not gotten it working.
Ideas would be most welcome....
Paul

Have you seen the FusionTips utility library? It does tooltips based off of FusionTables data. You should be able to convert it to doing InfoWindows, I'm not sure how efficient it will be.