I'm trying to pass two variable to a piece of Marker code that draws the markers on the map i just don't know how to pass the variable what type must they be in order for me to achieve this heres what im trying to do:
double car = -23.363882;
double car2 = 126.044922;
position: new google.maps.LatLng(car,car2)
In JavaScript, variables should be declared using the var statement. I'm not sure where you got double from.
Here's how you draw a marker on a map:
var lat = -23.363882;
var lng = 126.044922;
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: theMap,
position: latLng
});
I hate to say RTFM, but the API docs do spell out the answer to your question. http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
car and car2 variables should be declared in the following manner :
var car = -23.363882;
var car2 = 126.044922;
Note that Javascript doesn't use concrete types when declaring a variable.
Related
I want to access marker object through it's id. I want to move maker to new position based on change latitude and longitude. This latitude and longitude is define in form, and I added ng-change="changePosition()" when anybody change the latitude and longitude, marker should move, I know the marker id, how to access marker object through it.
$scope.changePosition= function(){
var latitude=$scope.latitude;
var longitude=$scope.longitude;
var marker_id =$scope.id; //Marker_id
var latlng = new google.maps.LatLng(latitude,longitude);
//Now I want to access marker object using marker_id,
marker_obj.setPosition(latlng);
}
I'd create a structure of all the markers, keyed on the ids.
var markers = {};
Add the markers into here when you create them:
var marker = new google.maps.Marker({...});
markers[marker_id] = marker;
Then access it again:
marker_obj = markers[marker_id];
marker_obj.setPosition(latlng);
i hope you can help me with my following problem. since days I´m tinkering on it, but it won´t run...
I´m writing a little web-app based on Google Maps API on wich i can mark my actual position on a map with a modified marker-symbol an so on. Everything works great so far. I receive my geolocation via HTML5-Geolocation function and write the values in to a mysql database. In a separate function (see below) i read out this data an set the marker with my modified symbol on the map.
The next I wan´t to solve is to remove the marker after about 40 minutes automatically from the map. For this I created a separate table on my database which gets filled with the marker-information from the main table. This works so far, I solved it with a php-script and a cron-job. Then the entry from the main table becomes deleted. What makes me insane is to remove the marker after the 40 minutes from the map. I tried several things, from creating arrays with the data of the "to-remove-table", i played around with the setMap-function of Google Maps API, but I´m still on the line.
Here is my code where I read out the data from database and set the marker on the map:
function markPolitesse() {
var infoWindow_spotted = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("politesse_spotted");
for (var i = 0; i < markers.length; i++) {
var number = markers[i].getAttribute("number");
var city = markers[i].getAttribute("city");
var zipcode = markers[i].getAttribute("zipcode");
var street = markers[i].getAttribute("street");
var type = markers[i].getAttribute("street");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + city + "</b> <br/>" + zipcode + "</b> <br/>" + type + "</b> <br/>";
var marker = new google.maps.Marker({
map: map,
position: point,
title: number,
icon: politessenImage
});
bindInfoWindow(marker, map, infoWindow_spotted, html);
}
});
}
The main- and the "remove-table" contain the following fields:
number, city, zipcode, street, streetnumber, coordinates_lat, coordinates_lng, time, date
I hope you have a impulse for me I would be thankful...
Regards,
Stefan
Store the marker in a global variable/outside the function, then in your function do the following:
marker.setMap(null);
// set up new marker
Then assign your new marker.
To allow users to delete the correct marker among those on the map, I need to associate each marker with its datastore ID, which is a string. I had originally thought I could set the ID as an integer and use the existing zIndex property of markers. That lead to the code below for creating each physical marker. (But, alas, I was unable to access the integer ID value.)
var marker = new google.maps.Marker({ position: point, map: map , title: text, icon: icon, zIndex: ID});
I don't know how to add a property to the prototype of google.maps.Marker that would hold the ID string, and I imagine it is not advisable to alter such prototypes, anyway. So how is this done? Do I have to use the zIndex property as an index for an array that contains the actual ID's as elements which correspond to the zIndex value? That's awkward, too. Surely there is a better way to do this.
Assuming you have an array of locations:
var markers = [];
for(var i in locations){
var loc = locations[i];
var marker = new google.maps.Marker({
position: loc.point
map: map,
title: loc.text,
icon: loc.icon
});
marker.id = loc.id;
markers.push(marker);
}
You can do this because each marker is just a plain old javascript object.
Then you can define a function to hide markers with particular IDs:
function hideMarkersWithIdIn(ids){
var markersToRemove = markers.filter(function(marker){
return ids.indexOf(marker.id) > -1;
});
markersToRemove.forEach(function(marker){
marker.setMap(null);
});
}
That can be used like
hideMarkersWithIdIn([1,5,3])
I was trying to follow this example http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515, to create custom markers.
I tried to change the example to use my data. The difference is that my data is already geocoded. I had trouble trying to figure why it didnt work when I changed the table id and the columns on the code.
So i printed the 'Address' on the original code and the one with my data.
The original code with the sample fusion-table, outputs the location like this
(37.4471132, -122.1602044)
Because my table is already geocoded I took away most of the function
function codeAddress(row) {
alert(row[1]);
var marker = new google.maps.Marker(
{
map : map,
position : row[1],
//this is where the magic happens!
icon : new google.maps.MarkerImage(icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
But the alert only diplays the coordinate a little bit different
<Point><coordinates>-78.423652,-0.203057,0.0</coordinates></Point>
So yeah, that is what I think it is not working
My opinion is that position : has to be followed by a google.maps.LatLng.
It looks like the row data is from KML, you need to extract the first two numbers to create the LatLng.
Mia DiLorenzo is right, the MarkerOption position expects a LatLng object.
Look at this example, which is very similar to yours, but it uses the Coordinates field to create the marker.
The example assumes, that the data in the Coordinates field is comma-separated "lat,lng"
e.g. 47.7672,-3.2022
But if your data happens to be in KML format then you can just extract the lat/lng values. The values are in order: longitude, latitude, and altitude (see the KML reference for details about KML coordinates):
function createLatLngObject(kmlString) {
//remove XML tags from input
var xmlRegEx = /<\/?\w+>/;
var kmlValue = kmlString.replace(xmlRegEx,'');
// now kmlValue contains e.g. -78.423652,-0.203057,0.0
//extract latitude and longitude
var coordinates = kmlValue.split(",");
var lat = coordinates[1];
var lng = coordinates[0];
return new google.maps.LatLng(lat, lng);
}
function createMarker(row) {
var latlng = createLatLngObject(row[1]);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
var map;
var vectors;
var point;
var drag;
Any long and Lat can be used
function mapCreate(lon,lat){
map = new OpenLayers.Map("map1");
var osm = new OpenLayers.Layer.OSM();
//create a vector
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(osm);
var center = new OpenLayers.LonLat(lon,lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
Assign a lat long to the point
point = new OpenLayers.Geometry.Point(lat,lon);
Add point to vectors
vectors.addFeatures([new OpenLayers.Feature.Vector(point)]);
map.setCenter(center, 15);
//add vectors to map
map.addLayer(vectors);
}
Am I missing something?
Are you looking at the full map? There's a high chance that you're setting the point's location as lat/lon. The OpenLayers LonLat object is so named only to trick innocent users like you into thinking that it automatically converts latitude longitude, or expects them, or something. Don't trust it, reproject into the projection of your map.
I thought Collection were necessary, but looks like you have lat & lon swapped. A point must have lon, then lat.
feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Collection([new OpenLayers.Geometry.Point(0, 0)]), {});
vectors.addFeatures([feature]);