I've embedded this map on my AIR app using StageWebView.
The javascript code provided by marinetraffic.com is this one :
<script type="text/javascript">
width='100%'; // the width of the embedded map in pixels or percentage
height='450'; // the height of the embedded map in pixels or percentage
border='1'; // the width of the border around the map (zero means no border)
shownames='false'; // to display ship names on the map (true or false)
latitude='37.4460'; // the latitude of the center of the map, in decimal degrees
longitude='24.9467'; // the longitude of the center of the map, in decimal degrees
zoom='9'; // the zoom level of the map (values between 2 and 17)
maptype='3'; // use 0 for Normal map, 1 for Satellite, 2 for Hybrid, 3 for Terrain
trackvessel='0'; // MMSI of a vessel (note: vessel will displayed only if within range of the system) - overrides "zoom" option
fleet=''; // the registered email address of a user-defined fleet (user's default fleet is used)
remember='false'; // remember or not the last position of the map (true or false)
language='en'; // the preferred display language
showmenu=true; // show or hide the map options menu
</script>
<script type="text/javascript" src="http://www.marinetraffic.com/js/embed.js"></script>
Is it possible to add the current position of the user on this map ?
if so, how can I do it ?
(I've tried to add this in my script :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
but it doesn't work).
Thx
Related
I'm working on a form where I want the user to enter their current location using the GPS location in google maps. I've read the Google Maps API documentation but I'm still a bit lost on how to integrate it all. I would appreciate any help, JS is still pretty new to me and it hasn't been easy to learn.
This is the code I used from Google Maps API.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 18.2208, lng: -66.5901},
zoom: 7,
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Localización encontrada.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwnKnBH4qxyjHYkg3QlJP46-yG_o4QkSc&callback=initMap">
</script>
Its kind of hard to answer your question since we are missing some information. Is the Google maps imported in your project with the geolocation API? You can create an account and generate a key on https://console.cloud.google.com
After that, you'll need to call the initMap() after the page is done loading by adding the following code at the end of your Javascript.
(function(){
initMap();
}());
From there, you can now get the value of the coordinates inside your initMap function and add them wherever you need them calling pos.lat and pos.lng.
infoWindow.setContent(pos.lat+' / '+pos.lng);
https://jsfiddle.net/SohRonery/q69ra78v/6/
Here are two jsfiddles with identical code. One is a fork from Google Maps API's documentation, no changes. The second is just copied and pasted into jsfiddle. The fork from Google renders as expected. The one I copied and pasted does not.
I used a diff checker, and it showed them as identical. What am I missing?
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDglJmtJY5078jjZOJZFNNMO7CJb5E3nE4&callback=initMap">
</script>
JS
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
In your second fiddle, the JAVASCRIPT settings needs to have Load Type as No wrap - in <body>
Currently, it appears that if I have say a modestly sized Google Maps display port (300px by 300px) with FullscreenControl enabled, and I center that small map view over a specific area, like... France, for instance... And then I hit the full screen button to expand the display to the edges of my screen (1920px by 1080px), France gets tucked wayyyyy up in the top-left corner of my screen.
Basically, the top-left of the original 300px x 300px display moves to the top-left of my screen, and rest of the world map extends from that corner at the original zoom level.
Is there any way to basically just set it up so that the full screen display opens up having the same center point as the original display, and vice versa when the full screen mode gets closed?
Does toggling the full screen button trigger an event or anything that I can hook a setCenter to?
I compose a code a bit strange but it works perfectly:
<script>
var map;
var center = -1;
var isFullScreen = false;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: { lat: -34.397, lng: 150.644 }
});
center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };
google.maps.event.addDomListener(map, 'bounds_changed', onBoundsChanged);
}
function onBoundsChanged() {
var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
var isFullWidth = $(map.getDiv()).children().eq(0).width() == window.innerWidth;
if (isFullHeight && isFullWidth && !isFullScreen) {
isFullScreen = true;
map.setCenter(center);
console.log('FULL');
} else if (!isFullWidth||!isFullHeight){
if (isFullScreen) {
map.setCenter(center);
}
isFullScreen = false;
console.log('NOT-FULL');
}
center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };
}
</script>
I use the bounds_changed event.
If I detect that the map is in full screen I set the map in the center that I note in the precedent event and I set a boolean to true. If the map is not in full screen, I check if the boolean is true, it mean that in the precedent event the map was in full screen, so I recenter the map and next I check if the boolean is false. At the end of the event, I keep the center in a variable fro the next event.
All this are not very clear...
You may consult this post in Stack Overflow.
Notice: This code does not work if you display a single map in all the page of your web app. I do not find a way to remove this bug. Your suggestions are very appreciated, thanks.
Also notice: My code is inspired of the precedent answer. However you can find the same code here. Please notice that it is not a duplicate answer. I add my own part of code in it.
Tell me if you have some questions or comments.
Try this
/** To detect Map Full Screen event */
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged ); //Event listener map bound change.
var isMapFullScreen = false;
var defaultLocation = {
lat: 27.94,
lng: -82.45
};
function onBoundsChanged() {
if(!isMapFullScreen){
var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
var isFullWidth= $(map.getDiv()).children().eq(0).width() == window.innerWidth;
if (isFullHeight && isFullWidth) {
isMapFullScreen = true;
myMarker.setPosition(defaultLocation);
map.setCenter(defaultLocation);
console.log('FULL');
} else {
isMapFullScreen = false;
console.log('NOT-FULL');
}
}
}
Is it possible to turn on drawing mode for an existing polyline with a google's DrawingManager?
It's possible in Google Maps web app when going to custom map editor (My Maps in menu -> Create map -> Draw). Then create a polyline, right-click on the last point and select extend line (see picture below).
But I can't find a way to do the same with google maps api v3.
set the editable-option of the polyline to true and add points to the polyline-path
Example:
click on the line makes the line editable
click on the map stops editing
rightclick on the vertex while extending the line stops editing
function initMap() {
var goo = google.maps,
map = new goo.Map(document.getElementById('map'), {}),
line = new goo.Polyline({
path: [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
]}),
bounds = new goo.LatLngBounds();
line.getPath().getArray().forEach(function(ll){
bounds.extend(ll);
});
map.fitBounds(bounds);
line.setMap(map);
/**
* click on the line makes the line editable
*
* click on the map stops editing
*
* rightclick on the vertex while extending the line stops editing
*
**/
goo.event.addListener(line,'click',function(e){
var line=this;
//make the line editable
this.setEditable(true);
//stopediting on map-click
goo.event.addListenerOnce(this.getMap(),'click',function(){
line.setEditable(false);
});
//when a vertex has been clicked
if(typeof e.vertex==='number'){
//when the first or last vertex has been clicked
if(!e.vertex ||e.vertex===this.getPath().getLength()-1){
//when the first vertex has been clicked reverse the path to
//be able do push a vertex
if(e.vertex===0){
var p=this.getPath().getArray();
p.reverse();
this.setPath(p);
}
//push a vertex
this.getPath().push(e.latLng)
//observe the mousemove of the map to set the latLng of the last vertex
var move=goo.event.addListener(this.getMap(),'mousemove',function(e){
line.getPath().setAt(line.getPath().getLength()-1,e.latLng)
});
//stop editing on rightclick
goo.event.addListenerOnce(this,'rightclick',function(){
goo.event.removeListener(move);
this.setEditable(false);
});
}
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>
<div id="map"></div>
I have used google maps for displaying some locations using markers, based on the user's current location. User's current location is the center point of the map. The default zoom level is 12. In default, I displayed markers within 300 miles(approximately in my case) distance only.
In that how can I do the following,
1) If decrease the zoom level, I need to increase the distance that should display markers within the increased distance also. how much distance should I increase in miles (i.e. Zoom level is 11) ?
2) If increase the zoom level, I need to decrease the distance that should display markers without the increased distance. how much distance should I decrease in miles (i.e. Zoom level is 13) ?
Please suggest me there is any built-in option to do that ...
I'm not sure if I understand your question correctly, but when you increase the zoom by 1 you must divide the distance by 2. When you decrease the zoom by 1 you must multiply the distance by 2.
The formula would be:
newDistance=(Math.pow(2,initialZoom-currentZoom)*initialDistanceAtInitialZoom)
Demo: (drawing a circle where the formula above will be used to calculate the radius)
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 4,
minZoom:2,
center: new google.maps.LatLng(52.52, 13.4),
noClear:true,
zoomControl:true,
draggable:false,
scrollwheel:false,
disableDefaultUI:true
}),
circle = new google.maps.Circle({
map:map,
center:map.getCenter(),
radius:300000*1.609344
}),
ctrl = document.getElementById('radius');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);
google.maps.event.addListener(map,'zoom_changed',
(function(z,r){
return function(){
var radius=(Math.pow(2,z-map.getZoom())*r);
circle.setRadius(radius);
ctrl.innerHTML=(radius/1609.344).toFixed(3)+' miles(zoom:'+map.getZoom()+')';
}
}(map.getZoom(),circle.getRadius())
));
google.maps.event.trigger(map,'zoom_changed');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{
height:100%;
margin:0;
padding:0;
}
#radius{
background:#fff;
padding:4px;
font-size:14px;
font-family:Monospace;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"><div id="radius"></div></div>
I found the zoom_changed event after a quick google
ex:
map.addListener('zoom_changed', function() {
infowindow.setContent('Zoom: ' + map.getZoom());
});
more info Google Api Docs here