so i have a custom svg marker, so i needed to give it an anchor of
anchor: new google.maps.Point(100, 100). from what i can see this causes my marker to be slightly off from where it should be. how can i correct this, for instance i was thinking something like
var marker = new google.maps.Marker({
anchor:google.maps.Point(sizeX , sizeY ),
position: myLatLng- new google.maps.Point(sizeX, sizeY),
});
but obviously this doesnt work because latlng and Points are different formats. so any idea on how to get around this? how can i convert google.Points into something i can do latLong Operations on
Related
I'm trying to make a nice google map with some markers on it. I've found some really convinient solution in the web, which covers almost my every need :D I'd like to colorize pin/markers on the map.
Well, tried to make a working jsfiddle, but unfortunately, something went wrong :( so you wouldn't see the map, but there are all codes :)
http://jsfiddle.net/hf37ftra/9/
// Multiple Markers
var markers = [
['Marker_name', 51.113882,17.070474],
];
this part is responsible for showing multiple markers, can I somehow define here the color of the marker (I know it is possible, because I've found tutorials to change ALL the markers colors, but I'd like to make let's say 4-5 different coloured markers)?
Later in the code is part for custom info box for every marker, so maybe it could be done that way :)
thanks!
You may use something like :
var markers = [
['Starter', 51.113882,17.070474,'icon1.png'],
];
and change your constructor to :
[...]
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][3]
});
In your for loop:
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
You can add extra line there:
icon: 'brownMarker.png'
Well, I love being on stackoverflow, when I can learn everyday something new with just some little help from others :)
// Multiple Markers
var markers = [
['Title', 51.113882,17.070474, 'http://youriconaddress'],
];
and then, in part:
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][3] // [3] tells JS to take third 'argument' from markers variable, from each one.
});
That way you can add as many arguments as you want, having a really nice and simple tool to make nicer google maps!
I am working on asp.net mvc 3 project we are using Google maps.I want to display marker at center of poly line.
I am using below code
var start = new google.maps.LatLng(
MyMapCordinates[0].lat(),
MyMapCordinates[0].lng()
);
var End = new google.maps.LatLng(
MyMapCordinates[MyMapCordinates.length - 1].lat(),
MyMapCordinates[MyMapCordinates.length - 1].lng()
);
debugger
var inBetween = google.maps.geometry.spherical.interpolate(start, End, 0.5);
var marker= new google.maps.Marker({
position: inBetween
});
It is working fine with polyline having two coordinates. But it fails for polyline with more than three co-ordinates. Please suggest
The interpolate method is designed only to work with two sets of coordinates. The computeLength() method looks like what you are looking for to calculate the distance of multiple points, and then just do some math to find the middle.
Does that help?
Is it possible to use part of a larger image as a marker with OpenLayers?
Like this (in google maps):
var icon = new google.maps.MarkerImage(
"img/marker_sprite.png",
new google.maps.Size(26, 44),
new google.maps.Point(0, 44)
);
The basic recipe for adding a marker to a map in OpenLayers starts with adding a Marker layer to your map, which you can do like this:
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
Then you will need to add markers to that layer, which goes something like this:
var position = new OpenLayers.LonLat(longitude, latitude);
position.transform(new OpenLayers.Projection("EPSG:4326",
map.getProjectionObject());
var icon = new OpenLayers.Icon("img/marker_sprite.png",
new OpenLayers.Size(26, 44));
var marker = new OpenLayers.Marker(position, icon);
markers.addMarker(marker);
Unfortunately it's not possible, as far as I know, so set the origin for the marker within the image file so you can just use part of the image. Well you can, but only if the part you want is in the corner, which isn't very helpful.
My current OpenLayers looks like the following:
a wrong map http://i1179.photobucket.com/albums/x384/yoyomyo/Picture2.png
It has twice as many continents as there should be.
I was trying to set Bounds to my map, but the entire map just refuses to render:
var map = new OpenLayers.Map('map', {restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)});
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayers([layer]);
map.setCenter(
new OpenLayers.LonLat(-71.147, -42.472).transform( new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
12);
Does any Map guru know what I did wrong?
WrapDateLine
Try wrapDateLine:false
It sounds like you want to set maxExtent.
http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels
Otherwise I have no clue. :)
It would be easier to answer with an example to work off of. I would zoom in 12 is pretty far out. And yes you can zoom in on OSM http://www.openstreetmap.org/
In that site, they use these values
var centre = new OpenLayers.LonLat(-0.1, 51.5);
var zoom = 5;
setMapCenter(centre, zoom); //It calls map.setCenter()
Okay I give up. I think this is just the way OpenStreetMap displays its map.
I have seen many demos and they are all like the one above.
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.