Have a huge problem, searching for weeks now. I have many markers and big InfoWindows per marker that most of time don't show up completely in my map-bounds. How to move the map automaticly and show these big InfoWindow exactly in the center? Further I think of showing it not only in the center (because the InfoWindows are more long than broad) but, say, in a lower position of center (centered, but near to bottom on the map-bounds). I hope you understand, what I mean.
Further, my InfowWindow even changed in size after I click on a link in it and get even bigger (o my god ;-), so I also have to handle this also.
You probably know that InfoWindow has an option disableAutoPan, but it's defaulted to false so that you should automatically see it whenever it's opened. If you want it in the center, then your best bet is in the click event before opening the InfoWindow, to center the map on the marker first. The autopan from opening should handle automatically and adjust the viewport to fit the InfoWindow from there as necessary.
//marker and map defined somewhere already
var iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function(){
map.setCenter(marker.getPosition());
iw.setContent('your content');
iw.open(map,marker);
});
Related
Using this example: https://developer.here.com/api-explorer/maps-js/infoBubbles/open-infobubble . I have a new map with two points.If I change the div of map adding width:100%;height:100% and position:absolute. I have a full screen map, but in this versión if i load the first time the page without full screen and a click a full screen windows i have a grey backgroud color. The same issue with a movile browswer when change the screen orientation. In the other API it didnt happened, all time the map is in full screen. ¿How can i fix it?
And the other question in this api, how i can close a infobubbles ??.
Regards and sorry for my english.
If I understand you correctly...
When you change the size of the map's container you need to call a refresh to the map.
For example - create your map:
var map = new H.Map(
document.getElementById(map_div),
defaultLayers.normal.map,
{
zoom: 4,
center: { lat: 45.3367, lng: -95.4492 },
});
Then add a listener for a window resize:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
Or call the resize method whenever you change the size of your div map container.
As for dealing with closing info bubbles, I am assuming you already have your HERE Maps UI object setup for adding/showing info bubbles.
To close the open one use the HERE Maps UI object:
ui.removeBubble(bubble);
if your issue is keeping track of what is currently open, trying assigning it to a script wide variable anytime you add a bubble:
//show info bubble
ui.addBubble(bubble);
openInfoBubble = bubble;
Then when you need to close the open InfoBubble:
if (openInfoBubble != null)
ui.removeBubble(openInfoBubble);
Hopefully, that answers your questions... good luck.
I'm using OpenSeaDragon for the first time and I'm trying to display to the console zoom level and Viewport center.
Now I found out how to display coordinates on click (Openseadragon image cordinates), but I'm having trouble w/ zoom and center. From looking at the API doc, I'm thinking that I need to use getCenter and getZoom of method Viewport, but syntactically I'm lost. Any help would be much appreciated. Thanks!
So after some help, here's the code I ended up using to get click coordinates as well as zoom and center (in image coordinates):
viewer.addHandler('canvas-click', function(target, info) {
var viewportPoint = viewer.viewport.pointFromPixel(info.position);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
console.log(imagePoint.x, imagePoint.y);
console.log(viewer.viewport.getZoom());
var viewportCenter = viewer.viewport.getCenter();
var imageCenter = viewer.viewport.viewportToImageCoordinates(viewportCenter.x, viewportCenter.y);
console.log(imageCenter.x, imageCenter.y);
});
You're on the right track. If your viewer is called viewer, you would do viewer.viewport.getZoom() for instance.
The viewport has a number of other coordinate conversion methods:
http://openseadragon.github.io/docs/symbols/OpenSeadragon.Viewport.html
...and there's also a plugin that provides even more, if you need:
https://github.com/msalsbery/openseadragonimaginghelper
I am experiencing a strange positioning issue when placing an overlay in my home city (Syracuse, NY). First the test map:
http://hotsdg.com/~downtown/map.html
This map uses the example code to place my image over newark. No problem here. The image is skewed and distorted of course, by placement occurs as expected.
The second map:
http://hotsdg.com/~downtown/map_two.html
This map uses the example code with coords adjusted to place the image over Syracuse, NY. At first glance the overlay appears to be missing. However, upon inspection I discovered that the element which is used for the overlay has it's top set to 94px (at the initial zoom), instead of 0px. Adjusting this manually brings the image into view.
Any thoughts as to what might be happening here, or more importantly, why it's happening?
A google.maps.LatLngBounds takes SW, NE LatLngs for the constructor.
Your working map does that (SW, NE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
the not working one is (NW, SE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.054340, -76.159101),
new google.maps.LatLng(43.042504, -76.142601));
I have a Google Maps JavaScript v3 map on my website that allows me to drag the marker to get the coordinates for the given location. This works perfectly but I also want to enter the coordinates manually and then click on a link to update the marker. This works great but I can't center the map to the marker (make it to pan to the marker).
I have also added a select box with solid coordinates to quickly get to a specific location on the map. I have the same problem for this one to as for the first problem.
The problem is that when I manually enter the coordinates or choose a fixed location, the marker only moves few steps from the origin position or it doesn't move at all. When you try to grab the marker and move it you can't move it and the X is far away from the marker. After few attempts to move the marker the maps goes blank but the marker stands still.
You can see my solution and problems on jsFiddle. How can I fix my issue?
Thanks in advance.
function moveMarker() {
var lat = parseFloat(document.getElementById('marker-latitude').value);
var lng = parseFloat(document.getElementById('marker-longitude').value);
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);
map.setCenter(newLatLng);
}
Does that work?
I hope you can help. I have a two pronged problem but I'm pretty new to javascript and the google maps API (v3) so please be gentle.
What i'm trying to do is add a marker to a map based on an address eg. Geocoding, then wherever that marker is, draw a circle around it at a radius of 5km. I've found some code to do the circle, and also the geocoding and both are working together nicely.
The problem is, I'm wanting to make the marker draggable to a new location and once at the new location, remove the old circle, and draw a new circle.
To understand what i'm trying to achieve, have a look at http://www.gleff.com/test/
With the above example, if you geocode an address, it centers on the marker location and draws the circle. I want to drag the marker somewhere else, and both remove the old circle, and draw the new circle based on the new location. At the moment, it just drags the marker to a new location but the circle stays where it is.
I assume the best approach is to drag the marker, then remove the overlay of the circle, and then re-add it at the new location.
Problem 1. How to remove the circle (overlay)
Problem 2. How to re-add it at the new location after dragging the marker
I've tried a number of things such as adding markers to an array eg. var markers = [];
and then trying to clear the overlays using this as an example.
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
I've been unsuccessful because I'm probably not putting the code in the correct place.
I've experimented with the overlay removal code in multiple parts of the javascript but nothing seems to work. Rather than go through all the locations of the code i've attempted to add the code to, i've purposely removed all reference to it to make it easier to understand.
So.. Can anyone offer any assistance? I just want to draw the circle around a marker, and then be able to relocate that marker (including the circle). But I want to understand how to remove the circle as well because ultimately, I will have multiple markers and will want to remove individual markers (including the circle) permanently from the map.
Note: I'm pretty sure I can work out how to remove the markers themselves, but the circle just doesn't want to be removed. If I geocode an address twice for example, the circle just draws a second time making it darker, rather than be removed from the map, and re-drawn.
Any assistance would be great.
Thanks
Geoff
Note: The only code i've modified is in the main.js
I'm not familiar with the API but you could have a look at what events are available in the API when you start dragging the marker and also when you drop the marker. Creating event listeners that draw and remove the circle around the marker is the way to go. I'm sorry I can't help you with WHAT event you need to listen for...
This gives a movable marker with circle overlay bound to it
function init() {
var mapCenter = new google.maps.LatLng(56, -4);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 10,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Create a draggable marker which will later on be binded to a Circle overlay.
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(56, -4),
draggable: true,
title: 'Drag me!'
});
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
map: map,
radius: 5000// 5 km
});
//Bind circle to marker
circle.bindTo('center', marker, 'position');
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);