I'm creating a Google map to display multiple points with each point having a short text label. I found a JavaScript library that lets me label the markers easily. I would also like to make the markers draggable. I'm working from this example.
http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/examples/createflaticon-simple.html
I tried the following, but it doesn't work, at least in Firefox 3.04.
var newIcon = MapIconMaker.createFlatIcon({ draggable: "true", label: "12300" });
var point = new GLatLng(43.82589,-79.10040);
var marker = new GMarker(point, {icon: newIcon});
map.addOverlay(marker);
marker.enableDragging();
Any suggestions?
http://code.google.com/apis/ajax/playground/?exp=maps#map_marker_drag
This should get ya there
Cheers
Related
I have two problems.
1 ) I have a google map with a marker and the label applied to it goes right through the center of the marker. Ideally I would like it above the marker, but at this point I'll take anything. Here's what I have.
var m:Marker = new Marker(new LatLng(tempLat,tempLang),new MarkerOptions({label:"Hello World"}))
2 ) I have the same problem with the infoWindow. It completely covers the marker. Here's the code.
map.openInfoWindow(new LatLng(tempLat,tempLang), new InfoWindowOptions({title: "Hello", content: "World"}))
Thank You.
I don't think there's any answer for the marker label, but for the InfoWindow this is what I have.
map.openInfoWindow(new LatLng(tempLat,tempLang), new InfoWindowOptions({title: storeName, content: to.text, hasTail:true, pointOffset: new Point(0, -40)}));
How will I be able to drop the pegman programmatically on a point on a map. I have a "click" event of the map. I need to drop the pegman on the coordinates where it was clicked.
If you want the pegman to appear on a map, you need to enable the streetview controller.
It can be disabled again after if you wish.
Check comments on original post for more information.
Pegman can be placed by application on a map, when the map and panorama containers are separated and panorama is associated to the map.
eg.:
HTML
<div id="mapContainer"></div>
<div id="svpContainer"></div>
JavaScript
var mapElement = document.getElementById('mapContainer');
var svpElement = document.getElementById('svpContainer');
var map = new google.maps.Map(mapElement, {...});
var svp = new google.maps.StreetViewPanorama(svpElement, {
position: {lat: svpLat, lng: svpLng},
visible: true,
...
});
map.setStreetView(svp);
The trick is, that svpContainer can be hidden as HTML Element by
CSS
#svpContainer {
display: none;
...
}
or
JavaScript
document.svpElement.hidden=true
or whatever (instead of svp being switched off from within itself [funcionality of svp option enableCloseButton: true] nor using programmically svp option visible:true/false) !
Svp option "visible" is the clue. It must be "true", to keep Pegman on the map.
In result the Pegman is on the map in the choosen by you place:
svp.setPosition({lat: ...,lng: ...});
Go mad :D
I want to have draggable markers (already done), but I need to be able to turn off draggability in certain conditions.
Marker is created like this;
var Marker = new GMarker(center,{draggable:true});
...which works fine. But I can't figure out how to make it undraggable.
like this
var myMarker = new GMarker(center,{draggable:true});
myMarker.disableDragging();
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker.disableDragging
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.
Pretty simple request, but there doesn't seem to be a way to do it. I just want my GMarkers to be green instead of red.
Do I really have to make my own icons?
This is the simplest method:
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
var markerOptions = { icon:greenIcon };
var marker = new GMarker(point, markerOptions);
That marker image is Google's, but you could also use your own.
MapIconMaker is great if you need to generate unique markers on the fly.
The best way I have found is with the following scripts...
labeledmarker.js
mapiconmaker.js
you then need the following code snippet:
var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = "#66CC6600";
iconOptions.cornerColor = "#66CC6600";
iconOptions.strokeColor = "#000000FF";
var iconSeller = MapIconMaker.createMarkerIcon(iconOptions);
function createMarker(icon, point,html,label)
{
opts =
{
"icon": icon,
"labelText": label,
"labelClass": "markerLabel",
"labelOffset": new GSize(-4, -31)
};
var marker = new LabeledMarker(point, opts);
GEvent.addListener(marker, "click",
function()
{
marker.openInfoWindowHtml(html);
});
return marker;
}
Make sure you have a class in your stylesheet called markerLabel so you can style the div which contains the label. I pinched most of this code from the excellent econym tutorial site where there are many clear examples and code samples.
See this: Map Overlays > Markers > Icons
Icons
Markers may define an icon to show in
place of the default icon. Defining an
icon is complex because of the number
of different images that make up a
single icon in the Maps API. At a
minimum, an icon must define the
foreground image, the size of type
GSize, and an icon offset to
position the icon.
The simplest icons are based on the
G_DEFAULT_ICON type. Creating an
icon based on this type allows you to
quickly change the default icon by
modifying only a few properties.
It looks like this is the simplest case. You use G_DEFAULT_ICON as the base GIcon, then extend it by altering the .image property of that new object. The simple example is pretty simple.
I need project for add gmarker in map and getting data from web services