I have a very strange problem.
Using Gmap3, I place the pin on the map and save its coordinates in a database. After a refresh, I give the same coordinates to Gmap3 to place the pin on the map. The problem here is that the pin is positioned on the same coordinates, but now these coordinates are in different position on the map.
Example: If I place the pin near Moscow, Russia, after a refresh, the pin is placed near Afghanistan...
First I`m loading pins from here http://bghelpmap.com/listPins.php
And i use this before add them to the map:
var bghMarkers = [];
$.each(ttt, function(i, tmp){
bghMarkers.push({
lat: tmp.lat,
lng: tmp.lng,
options: { icon:new google.maps.MarkerImage("http://www.bghelpmap.com/images/pin"+tmp.pinType+".png") },
data: tmp
});
});
After this i am useing setMyMarkers() from file http://bghelpmap.com/js/default.js
The function is long, so i`m not posting it here.
Any suggestions?
It looks like you might be switching latitudes and longitudes when you store/retrieve the coordinates in your database.
Moscow is at roughly (55.747, 37.628)
http://maps.google.com/maps?q=55.747,%2037.628&z=5
(33.628, 55.747) is somewhere in the middle east.
http://maps.google.com/maps?q=37.628,%2055.747&z=5
Related
How do I enable 3D satellite view in Google Maps JavaScript API, please?
Let me repeat! 3D!
Please do NOT refer me to the 45-degree angle view, that is NOT 3D!
You can get this on Google Maps by clicking the Satellite view and click the 3D icon below the compass in the lower right corner (in red square).
Unfortunately, you cannot make the Google Maps JavaScript API have a 3D option. An alternative is to use the setTilt(number) function as explained in the Google Maps Documentation - Map Types.
Enabling and Disabling 45° Imagery
You can disable 45° imagery by calling setTilt(0) on the Map object. To enable 45° imagery for supported map types, call setTilt(45). You can also use a number other than 45 degress if you wanted to.
⭑ The Map's getTilt() method will always reflect the current tilt being shown on the map; if you set a tilt on a map and then later remove that tilt (by zooming the map out, for example), the map's getTilt() method will return 0.
The following example displays a 45° view of downtown Portland, OR:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 36.964, lng: -122.015},
zoom: 18,
mapTypeId: 'satellite'
});
map.setTilt(45);
}
View Example
Rotating 45° Imagery
The 45° imagery actually consists of a collection of images for each cardinal direction (North, South, East, West). Once your map is displaying 45° imagery, you can orient the imagery towards one of its cardinal directions by calling setHeading() on the Map object, passing a number value expressed as degrees from North.
The following example shows an aerial map and auto-rotates the map every 3 seconds when the button is clicked:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.518, lng: -122.672},
zoom: 18,
mapTypeId: 'satellite',
heading: 90,
tilt: 45
});
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery.
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}
View Example
Unfortunately, as of now, the feature hasn't been implemented into Google Map JavaScript API yet.
As RoGuKa said there currently is no feature to achieve this in the Google Maps Javascript API. In the past there was the Google Earth API but this has been deprecated due to security flaws in the frameworks it used and won't run on any modern browsers.
A option may be to use some other 3d mapping solution such as https://cesium.com/platform/cesiumjs/.
Is it possible to show the change for Latitude / Longitude in Google Map as the user moves the mouse cursor over a KML polygon ?
The following script works fine for Google Map. Yet it does not change when the user moves the mouse cursor over a polygon region.
google.maps.event.addListener(
map, 'mousemove',
updateLatLngBox
);
Snapshot showing the Lat/Long does not change when the user moves into the Blue Region
Partially solved via the following using mouse 'click' :-
google.maps.event.addListener(AreaA, 'click', function(kmlEvent) {
var latitude = kmlEvent.latLng.lat().toFixed(12);
var longitude = kmlEvent.latLng.lng().toFixed(12);
document.getElementById("latLngContainer").innerHTML =
"Lat/Long (dd):<br/>" + latitude + "," + longitude;
});
I use openlayers3 to build an application
I would like to change the zoomlevel icons are visible at
https://bestofosm.org/?lon=4.0798&lat=50.9136&zoom=15#interesting-het-loo-garden
for example
if you go to London you see airports are visible at zoomlevel 10
lets say I want all touristic icons visible at zoomlevel 10
and airport icons at zoomlevel 15
is this possible?
The most simple solution is to put your markers in different layers and give each layer a minResolution and maxResolution. When the map zooms outside these resolutions the layers will automatically become hidden. Something like:
var touristicIcons = new ol.layer.Vector({
source: touristicIconsSource,
minResolution: xx
maxResolution: xx
});
// Repeat for airports layer, with different resolutions
Writing down a zoom level as a resolution will not work. You will need to find out what resolution belongs to your desired zoom level. The easiest way to do this is with this little hack, that logs the zoom level and resolution every time you scroll through the map:
map.getView().on('change:resolution', function (event) {
var view = event.currentTarget;
console.log('Zoom: ' + view.getZoom() +
', resolution: ' + view.getResolution());
});
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.
I have two polylines drawn on a google maps api v3 directions service.
My problem is that where they overlap on part of the map, one covers the others. I wish to draw 6 lines in total which are bus routes in my city. All routes come back to the same area of the city but it will be very difficult to distinguish them apart.
Is there a way to slightly offset each line?
function busRoute2(source,destination){
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true,
polylineOptions: { strokeColor: '#000000', strokeOpacity: 0.5 }
});
directionsDisplay.setMap(map);
var request = {
origin:source,
destination:destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
Heres the working code (very basic) polyLine offset map animated Note: The icon 'offset' property is the percent offset of the icon along the line.
You need to manipulate the relative 'path' Coordinates (SVG format) of the icon (in your case a line) itself in order to offset it away from the line
Forget my suggestions. I tried to create a repeat icon (2 pixel dot) repeated every 4 pixels offset from the polyLine. It looks absolutely disgusting and lags the browser.
I am going to have to create a function that edits the coords of the polyline at load time according to angle dLat, dLng and zoom scale.
As you want your markers (stops, buses) and lines to be on one side of the road going one direction and the opposite going back. You also dont want to obscure the road name on the map
If anyone wants to help with this email me at huntington#beachincalifornia.com