Get Markers Coordinates To MAP - javascript

Im try to get the markers coordinates to the map, or to the window, to set a special functions when i make over with the mouse, my test code is this:
var multiMarker = [];
var xmyOptions = { // Ponemos unas coordenadas iniciales al mapa de google maps.
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var xmap = new google.maps.Map($('#map_canvas2').get(0), xmyOptions); // Iniciamos el mapa indicando el Div donde se va a cargar y las opciones.
for (x=0; x<9; x++) {
multiMarker[x] = new google.maps.Marker({ // Definimos una nueva "marca" o puntero
position: new google.maps.LatLng('40.' + Math.floor(Math.random()*99999999), '-3.' + Math.floor(Math.random()*99999999)),
draggable: true,
map: xmap,
title: 'Ejemplo marcador arrastrable'
});
google.maps.event.addListener(multiMarker[x], 'mouseover', function(){
console.log(this);
});
}
var bounds = new google.maps.LatLngBounds();
for (index in multiMarker) {
var data = multiMarker[index];
bounds.extend(new google.maps.LatLng(data.position.Oa, data.position.Pa));
}
xmap.fitBounds(bounds);
The problem is i cant get this coordinates in the marker[x] object, i only see the latitude and longitude, and I need the top, left, bottom or right position of the marker to set special floating tooltips. The API doesnt have this info?
Thanks.

I answered similar question here: How to access Google Maps API v3 marker's DIV and its pixel position?
What you can get is position of marker in world coordinate, then convert to offset from top left corner of visible rectangle. But it's only position, you don't have access to marker itself, so you can't add events to it or alter marker div this way.
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
If for some reason you need access to marker's div, then you need to check what divs are created for map, select in which layer (markers are in one layer, but I don't remember which, don't confuse them with marker shadows :-)) and then somehow check which position this divs have, to select one you need.

Related

Google Maps API 3 - Show All Markers on Screen, but Keep Centerpoint

This is very similar to this question. I would like to ensure that all markers are shown at the current zoom level. However, I would also like to choose the center point beforehand (current location of user). If circles are markers, and the square is my intended centerpoint, in the images below, the linked solution would create the first (left, top) image. I would like the second (right, bottom) image.
You can create a LatLngBounds object and extend it with each of your markers coordinates. Then get your bounds object north east and south west coordinates and check whether theses coordinates are contained within the current map bounds. If not, zoom out and try again.
Most of the below code is to generate random markers within certain bounds. The real interesting parts are where I call bounds.extend(position) and the fitAllBounds function.
var map, bounds;
function initialize() {
var southWest = new google.maps.LatLng(40, -70);
var northEast = new google.maps.LatLng(35, -80);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var center = new google.maps.LatLng(40, -70);
map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Add center marker
new google.maps.Marker({
position: center,
label: 'C',
map: map
});
// Create the bounds object
bounds = new google.maps.LatLngBounds();
// Create random markers
for (var i = 0; i < 20; i++) {
// Calculate a random position
var position = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(5);
map.setCenter(marker.position);
}
})(marker, i));
// Extend the bounds with the last marker position
bounds.extend(position);
}
// Fit all bounds once, when the map is ready
google.maps.event.addListenerOnce(map, 'idle', function() {
fitAllBounds(bounds);
});
}
function fitAllBounds(b) {
// Get north east and south west markers bounds coordinates
var ne = b.getNorthEast();
var sw = b.getSouthWest();
// Get the current map bounds
var mapBounds = map.getBounds();
// Check if map bounds contains both north east and south west points
if (mapBounds.contains(ne) && mapBounds.contains(sw)) {
// Everything fits
return;
} else {
var mapZoom = map.getZoom();
if (mapZoom > 0) {
// Zoom out
map.setZoom(mapZoom - 1);
// Try again
fitAllBounds(b);
}
}
}
initialize();
#map-canvas {
height: 200px;
width: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Here it is also on JSFiddle:
JSFiddle demo

How do I pan and zoom to the bounds of a map defined by the markers

When I have 1 marker, it should zoom into the map to the marker (high zoom level? zoom more in)
When I have more than 1 marker then it should detect the edges defined by all markers (top, right, down and left) and zoom into this
I have this code:
lMap.fitBounds(new L.LatLngBounds(this.bounds));
What is next?
var zoom = lMap.getBoundsZoom(new L.LatLngBounds(this.bounds));
lMap.setZoom(zoom);
Or some pan/zoom inside method?
This JSFiddle should show how to use map.fitBounds to do what you want. Basically, just pass in an array of LatLng objects.
you can create a bounding object
var bounding = new google.maps.LatLngBounds();
add your markers to it
bounding.extend(myMarker1LatLng);
bounding.extend(myMarker2LatLng);
...
and then use that bounding object to set the map view
map.fitBounds(bounding);
https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds
I am pretty sure its Work
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
if (data.lat != '' && data.lng != '') {
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: iconBase,
map: map,
title: data.Name
});
}
bounds.extend(myLatlng);
and for map view
map.setCenter(bounds.getCenter(), map.fitBounds(bounds));

Move OpenLayers.Popup up to 10 pixel and left 15 pixel?

Good afternoon, I have a popup that is in the map and I want only move 10 pixels high and 15 pixels to the left, the problem is that when you change its position in latitude and longitude, is in another position completely and when I zoom away from the marker, what I want is just to move to the new position regardless of the zoom, always remains above the marker.
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('/openlayers/img/marker.png',size,offset);
var lonlat = new OpenLayers.LonLat(long,lat);
var proj_1 = new OpenLayers.Projection("EPSG:4326");
var proj_2 = new OpenLayers.Projection("EPSG:900913");
var EPSG = lonlat.transform(proj_1,proj_2);
var marker = new OpenLayers.Marker(EPSG, icon);
markers.addMarker(marker);
marker.events.register("click", marker, function(e){ // on click popup
var popup = new OpenLayers.Popup.FramedCloud(id,
marker.lonlat,
new OpenLayers.Size(200,200),
'<div class="popup">info example</div>',
null,true);
map.addPopup(popup);
});
var labelepopup = new OpenLayers.Popup(null,
EPSG,
new OpenLayers.Size(37,13),
'<p style="font-size: 8.5px;">always info</p>'
);
map.addPopup(labelepopup);
The popup on the marker as labelepopup appear, all I want is to accommodate the labelepopup above the marker.
You can use getPixelFromLonLat map function to get the exact pixel from a latitude and a longitude and then use the Pixel object returned to add or remove the desired pixels. Then you can change popup position using moveTo popup function that requires a Pixel object.
Something like this:
var pixel = map.getPixelFromLonLat(popup.lonlat); //or use another OpenLayers.LonLat object
pixel.x += DESIRED_X_AMOUNT;
pixel.y += DESIRED_Y_AMOUNT;
popup.moveTo(pixel);

Google maps V3: prevent marker scaling

I have a google map, and an marker on it.
I need the marker to be a fixed size of, for example, 10x10 pixels, and remail the same even if i zoom in or zoom out.
This is what i have right now (and is not workig):
var marker = new google.maps.Marker({
position: circleCenter,
map: googleMap,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0.5,
fillColor: 'ff0000',
strokeWeight: 10,
size: 5
}
});
Is this possible to block the marker of scaling it's size when the map zoom is changed?
Google does not have a out-of-box way to stop markers from scaling.
You could use a Ground Overlay to set a fixed area on the map and then attach an image. The trick with ground overlays is you have to know the coordinates of the bounds object and you probably will have to come up with some way of calculating the bounds. In this example I just expand a center point into a rectangle.
You would also loose other marker capabilities since this method doesn't use a marker object (e.g. dragging, animations, etc.), but the overlays do have click events.
Here is a proof of concept: http://jsfiddle.net/bryan_weaver/4rxqQ/
relevant code:
function initialize() {
var map;
var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
var options = {
zoom: 9,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var icon = 'https://www.google.com/mapfiles/marker_black.png';
var iconBounds = constructBounds(38.713107, -90.42984);
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
staticOverlay.setMap(map);
}
function constructBounds(lat, lng){
var sw = new google.maps.LatLng(lat - .03, lng - .025)
var ne = new google.maps.LatLng(lat + .03, lng + .025)
return new google.maps.LatLngBounds(sw, ne);
}

Drawing line (freeform) on Google maps?

Hi I want to draw a line (free-form, Photoshop pencil / paintbrush style) over Google maps.
What would be the best way to do it?
How complicated would it be to do this AND keep the zoom option (so that line scales / disappears when the map is scaled)?
Which would be the best library to use for that (canvas? svg? something else)?
You could use the built indrawing tools, but if I recall correctly, you would need to click quite a bit to get a free form line.
Here's another pretty rough idea. Capture the mouse coordinates of the map container, grab the latLng from a google.maps.MapCanvasProjection and push the coordinates to a polyline path.
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];
var isDrawing = false;
var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);
// Add a listener for idle event and call getElevation on a random set of marker in the bound
google.maps.event.addListener(map, 'click', function () {
var polyLine = new google.maps.Polyline({
map: map
});
$("#map").mousemove(function (e) {
var pageX = e.pageX;
var pageY = e.pageY;
var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
polyLine.getPath().push(latLng);
});
});

Categories

Resources