this is displaying marker on a map on giving lat and lng as 24.8 and 67.2
var marker = new google.maps.Marker({
position: new google.maps.LatLng(24.8, 67.2),
map: map,
title: 'Hello Karachi!' });
}
here is the function which alerts the lat and lng getting from database
function CallL()
{
var len = document.getElementById('slcLon').length;
for(var i=0; i<len ; i++)
{
alert(document.getElementById('slcLon').options[i].text);
}
var len2 = document.getElementById('slcLat').length;
for(var j=0; j<len2 ; j++)
{
alert(document.getElementById('slcLat').options[j].text);
}
}
Now what i want to do is to give lat and lng from this loop to POSITION in marker but when i try to pass loop there it gives me syntax error.
any help will be grateful displaying multiple markers on the map
Your question is not at all clear but you may want something like this:
var markers = [],
latitudes = document.getElementById('slcLat'),
longitudes = document.getElementById('slcLon');
for (var i = 0; i < latitudes.length; i++) {
for (var j = 0; j < longitudes.length; j++) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(latitudes.options[i].text, longitudes.options[j].text),
map: map,
title: 'Hello Karachi!'
}));
}
}
This would produce an array of markers for every combination of latitude and longitude that can be found in your select.
Edit: You indicate in the comments you don't want every combination, and that there are the same number of latitudes and longitudes which have to be paired together. So:
var markers = [],
latitudes = document.getElementById('slcLat'),
longitudes = document.getElementById('slcLon');
for (var i = 0; i < latitudes.length; i++) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(latitudes.options[i].text, longitudes.options[i].text),
map: map,
title: 'Hello Karachi!'
}));
}
Related
I'm about to complete my project just some small stuff to do and I'd appreciate if someone could help me about this issue.
I want to put marker label'A' and 'B' on first and last marker but I don't know how to do this,I tried some solutions but that was not useful.
and this is my code snippet without complexity.
var dataModel;
var line = [];
polyline = new google.maps.Polyline({
path: Coordinates,
geodesic: true,
strokeColor: '#00cccc'
)};
line.push(polyline);
for (i = 0; i < line.length; i++) {
line[i].setMap(null); //or line[i].setVisible(false);
}
for (var j = 0; j < Markers.length; j++) {
Markers[j].setMap(null);
}
Markers = [];
$.each(marker, function (index, value) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(value.Latitude, value.Longitude),
map: map
});
Markers.push(marker);
});
.imgur.com/Jkxcc.jpg
You can use the MarkerLabel interface
You will have to add the label in the following way while creating the marker :
var markerA = new google.maps.Marker({
position: {lat: -25.361, lng: 132.959},
map: map,
label: {
text: 'A'
}
});
You can check the Marker Label Example for a complete example
As per your requirement you will need to add 'A' for the first marker and 'B' for the second marker while you are iterating dataModel
Tried to create moving marker. But the marker create new not moving the same. I want moving marker with remove previous marker
function makeMarker(map) {
var icons = 'images/tvsxl.png';
setInterval(function(){ var markers = [];
$.post( "ajaxload.php?shop_id=<?php echo $outlet_id?>", function(data) {
var obj = $.parseJSON(data);
var value = obj['data'];
//console.log(value.length);
for (i = 0; i < value.length; i++) {
var myLatLng = new google.maps.LatLng(value[i].latitude ,value[i].longitude);
var marker = new google.maps.Marker( {position: myLatLng, map: map,icon: icons,title:value[i].name} );
markers.push(marker);
markers[i].setMap( map );
}
});
}, 3000);
Try to clear old markers before placing a new ones
for(var i=0; i<markers.length; i++){
markers[i].setMap(null);
}
//clear old markers form array
markers = [];
try this
markers[marker-index-value].setMap( null);
The function below does not remove the markers when called. Why?
// Remove existing markers from the Map
function removeMarkers(markersArray) {
var j,position;
for (j = 0; j < markersArray.length; j += 1){
position = new google.maps.Marker({
position: {lat: markersArray[j][1], lng: markersArray[j][2]}
});
position.setMap(null);
};
};
Here is the array that is being fed into the function:
var educationMarkers = [
['Grafton Campus, Auckland University', -36.861717, 174.769424],
["Auckland Boys' Grammar", -36.872432, 174.768126],
["Epsom Girls' Grammar", -36.876177, 174.773639],
["St. Peter's College", -36.868412, 174.768575],
["ACG Parnell College", -36.863163, 174.778555],
["Newmarket Campus, Auckland University", -36.865905, 174.7733]
];
You need to keep reference of the markers you placed.
var placedMarkers = [];
function placeMarkers(markersArray) {
var marker, i, postiion, bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersArray.length; i += 1) {
marker = new google.maps.Marker({
map: map,
position: {
lat: markersArray[i][1],
lng: markersArray[i][2]
}
});
// keep reference of the markers you placed
placedMarkers.push(marker);
position = new google.maps.LatLng(markersArray[i][1], markersArray[i][2]);
bounds.extend(position);
}
map.fitBounds(bounds);
};
and when removing the markers, use the reference array you kept.
// Remove existing markers from the Map
function removeMarkers() {
var j,position;
// loop through reference array you kept.
for (j = 0; j < placedMarkers.length; j += 1){
placedMarkers[j].setMap(null);
};
};
If the markers in the loop are correct,Just change your for loop with this,Make a fiddler if possible
for (j = 0; j < markersArray.length; j += 1){
position[j] = new google.maps.Marker({
position: {lat: markersArray[j][1], lng: markersArray[j][2]}
});
position[j].setMap(null);
};
I need to assign 50 map markers for a google map. I don't want to have the (almost) same line of code 50 times. What is the best way to loop through this easily and optimize code?
var marker1 = new google.maps.Marker({position: new google.maps.LatLng(location1_latitude,location1_longitude),map: map1,title:location1});
var marker2 = new google.maps.Marker({position: new google.maps.LatLng(location2_latitude,location2_longitude),map: map1,title:location2});
var marker3 = ...
repeating to
var marker50 = new google.maps.Marker({position: new google.maps.LatLng(location50_latitude,location50_longitude),map: map1,title:location50});
you can use two arrays and iterate over them:
var location_latitude = [0,1,2,3,4,5] // all your latitudes
var location_longitude = [0,1,2,3,4,5] // all your longitudes
var location_titles = ['loc0','loc1','loc2','loc3','loc4','loc5']
var markers = []
for (var i = 0; i < location_latitude.length && i < location_longitude.length && i < location_titles.length; i++) {
markers[i] = new google.maps.Marker({position: new google.maps.LatLng(location_latitude[i],location_longitude[0]),map: map1,title:location_titles[i]});
}
you can also abstract lat, lng and title into an object:
var locations = [{lat: 0, lng: 0, title: 'latlng0'},{lat: 0, lng: 0, title: 'latlng0'}] // depending on how you get you're data, you'll want to adjust your loop's format so you don't have to manually convert it
var markers = []
for (var i = 0; i < locations.length; i++) {
var current = locations[i]
markers[i] = new google.maps.Marker({position: new google.maps.LatLng(current.lat,current.lng),map: map1,title:current.title});
}
so i works in a geolocation project(asp.net MVC4), i have many positions in my database and i want to show it in my map, my problem that the script just show the first position, this is my script:
var checkpoints = [];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++)
{
var place = locations;
for (var i = 0; i < place.length; i++)
{
var points = new google.maps.LatLng(place[i][1], place[i][2]);
checkpoints.push(points);
}
var check = checkpoints[0];
var index = 0;
for (var j = 0; j < checkpoints.length; j++)
{
check = checkpoints[j];
index = j;
var myLatLng = new google.maps.LatLng(place[index][1], place[index][2]);
var marker = new google.maps.Marker
(
{
position: myLatLng,
map: map,
title: place[index][0],
zIndex: place[index][3]
}
);
}
}
return marker;
}
so please if someone have any solution or idea i will be very appreciate.
Thanks everyone #david #Beetroot-Beetroot #razzak my script works fine now, this is my new script :
var checkpoints = [];
function setMarkers(map, locations) {
for (var i in locations) {
var points = new google.maps.LatLng(locations[i][1], locations[i][2]);
checkpoints.push(points);
var marker = new google.maps.Marker({
map: map,
position: points,
title: locations[i][0],
zindex: locations[i][4]
});
}
}
Update :
my script works fine but i have a small problem in my event, when i dblclick on a marker it should show his title but it just show me the title of the last marker :
var checkpoints = [];
function setMarkers(map, locations) {
for (var i in locations) {
var points = new google.maps.LatLng(locations[i][1], locations[i][2]);
checkpoints.push(points);
var marker = new google.maps.Marker({
map: map,
position: points,
title: locations[i][0],
zindex: locations[i][4],
});
//this is my event
google.maps.event.addListener(marker, 'dblclick', function () {
alert("I am marker " + marker.title);
});
}
}
I have simplified your code
function setMarkers(locations) {
for(var i in locations) {
var points = new google.maps.LatLng(locations[i][1].lat,locations[i][2].lng);
checkpoints.push(points);
var marker = new google.maps.Marker({
map:map,
position: points,
icon: 'myicon.png',//
title: locations[i][0],
zindex: locations[i][4]
});
}
}
Mohammadov, you are making it more complicated than it needs to be.
Try this :
function setMarkers(map, locations) {
for(var i=0; i<locations.length; i++) {
var loc = locations[i];
loc[4] = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
map: map,
title: loc[0],
zIndex: loc[3]
});
}
}
The map should then show the markers, and each member of the locations array should be augmented with a reference to its marker, as element [4].
the two loops inside the main loop are causing problems, they are unnecessary and can be avoided. also return marker at the end of the loop will return only the last one, you can remove it as well:
var checkpoints = [];
function setMarkers(map, locations) {
for (var i=0; i<locations.length; i++)
{
var place = locations[i],
myLatLng = new google.maps.LatLng(place[1], place[2]),
marker = new google.maps.Marker
(
{
position: myLatLng,
map: map,
title: place[0],
zIndex: place[3]
}
);
checkpoints.push({"point": myLatLng, "marker": marker});
}
}
The checkpoints now should have an array of LatLng and marker of each place.
jsfiddle