I'm using the lastest version of google maps, and trying to print the markers in the map.
To do that, I'm using:
function initmap2() {
map2 = new google.maps.Map(document.getElementById('map-scan'), {
zoom: 16,
styles: style,
center: { lat: 13.7218501, lng: -89.2039192 }
});
for (i = 0; i < positions.length; i++) {
markers = new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
});
}
var markers = positions.map(function (location, i) {
return new google.maps.Marker({
position: location,
});
});
for (var i = 0; i < markers.length; i++) {
markers[i].info = new google.maps.InfoWindow({
content: '<b>' + positions[i]["title"].toUpperCase() + '</b>'
});
markers[i].info.open(map2, markers[i]);
}
}
The markers are displayed in the right position, but the InfoWindws are very distanced of them.
Why I'm using map2 instead of map. I have preloaded another googlemap and the map2 is loaded in a dialog (on demand, when the dialog is open)
How to fix this behavior?
Your problem is this... you loop over positions, creating a marker for each of your positions:
for (i = 0; i < positions.length; i++) {
markers = new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
});
}
You then do the same thing again:
var markers = positions.map(function (location, i) {
return new google.maps.Marker({
position: location,
});
});
And at the end of this 2nd way of doing it, markers is an array of markers. Which you then loop over to setup the infowindows.
However, the first time you created the marker, you specified the map attribute. So those markers show up on the map.
The second time you didn't bother, so these markers aren't on the map.
You've got markers visible thanks to your first way of doing it. But then you're attaching the infowindows to the non-visible markers created the second way! :-/
The code's a bit of a mess, you can do it all in just the one loop over positions, and make sure you specify the map property for each marker. I'd just do:
var markers = [];
for (i = 0; i < positions.length; i++) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(positions[i]),
map: map2
}));
markers[i].info = new google.maps.InfoWindow({
content: '<b>' + positions[i]["title"].toUpperCase() + '</b>'
});
markers[i].info.open(map2, markers[i]);
}
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
I have added google maps API of JavaScript in angular 2.
Added custom markers on the map according to positions fetched from API.
I have displayed list of positions on UI. After click on position I want to replace that position's corresponding marker icon and reset all other icons.
Following code is not working as expected.
I have added this function to place markers on map:
placeMarkers(markers: any, infoWindowContent: any) {
// Display multiple markers on a map
let infoWindow = new google.maps.InfoWindow();
let bounds = new google.maps.LatLngBounds();
let marker;
// Loop through our array of markers & place each one on the map
for(let i = 0; i < markers.length; i++ ) {
let position = new google.maps.LatLng(<number>markers[i].lat, <number>markers[i].lang);
bounds.extend(position);
marker = new google.maps.Marker(<google.maps.MarkerOptions>{
position,
map: this.map,
title: markers[i].name,
icon: this.iconUrl,
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i]);
infoWindow.open(this.map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
this.map.fitBounds(bounds);
}
}
And this code to replace marker of selected position:
selectSite(site: any, index: any) {
this.placeMarkers(this.finalMarkers, this.finalInfoWindowContent);
let selection = this.finalMarkers.find(function(item) {
return item.name == site.Name
});
let infowindow = new google.maps.InfoWindow();
let position = new google.maps.LatLng(<number>selection.lat, <number>selection.lang);
let redMarker = new google.maps.Marker(<google.maps.MarkerOptions>{
position: position,
map: this.map,
title: selection.name,
icon: {url: require('../../../assets/img/red-marker.png'), scaledSize: {height: 30, width: 20}}
});
redMarker.addListener('click', function() {
infowindow.setContent(selection.name);
infowindow.open(this.map, redMarker);
});
}
Above code is working fine initially, but got stuck after multiple location changes.
Any help is very much appreciated!
**You can Set Following marker**
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
This is how I did it.
I simply did it outside google maps and it works great.
https://youtu.be/2cA3pQQoEr8
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 6 years ago.
I have an issue with google maps marker. Actually on my map I added several markers with an event listener to trigger an event on click, but they all seam to trigger the same function.
for(var j = 0; j < lat_long.length; j ++) {
markers[j] = new google.maps.Marker({
position: latitudeAndLongitudeOne,
icon: self.icon,
scaledSize: new google.maps.Size(50, 50),
map: self.map,
title: lat_long[i].name
});
google.maps.event.addListener(markers[j], 'click', function() {
alert(j);
});
}
I have alert( x ) , with x being the id of the last item inserted. whatever the marker I click on.
Any idea?
Thank you
var markers= [];
for(var i = 0; i < lat_long.length; i ++) {
var marker = new google.maps.Marker({
position: latitudeAndLongitudeOne,
icon: self.icon,
scaledSize: new google.maps.Size(50, 50),
map: self.map,
title: lat_long[i].name
});
marker.addListener('click', function() {
alert(marker.title);
});
markers.push(marker);
}
I am not sure but you can try
This is because you can´t define the markers as you do. Create an global array and push in that array the instances of each created marker.
So:
For all markers, define an array to keep the reference of each created marker:
var markers = []; //Global Marker Array
function printMarker(lat, lng){
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
icon: icon,
map: map
});
markers.push(marker);
}
Now you just have to add the clickListener to the current reference of the marker witin you loop.
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
I'm using the Google Direction Service to retrieve the lat+lng of the route, then pass the latlon to a php file and return markers via a xml file.
This all works fine, apart from I cant clear the old markers when I request a new route. The code below shows how I get the markers from the xml file, using jQuery. And the code underneath that shows the function I'm trying to use to clear the route (that works) and the old markers (that does not!)
Many thanks for any help.
//RETURN DATA FOR PLACE MARKERS
jQuery.get("MYXMLFILE", function(data) {
jQuery(data).find("marker").each(function() {
var eachMarker = jQuery(this);
var markerCoords = new google.maps.LatLng(
parseFloat(eachMarker.find("Lat").text()),
parseFloat(eachMarker.find("Lng").text())
);
var header = eachMarker.find("title").text();
var content = eachMarker.find("Content").text();
var wxicon = eachMarker.find("icon").text();
//---------------------------------------------
var marker = new google.maps.Marker({
position: markerCoords,
map: map,
icon: wxicon,
animation: google.maps.Animation.DROP,
title: header,
});
gmarkers.push(marker); // store the reference
});
});
//CLEAR OLD ROUTE + CLEAR MARKERS
function deleteOverlays() {
directionsDisplay.setDirections({routes: []});
gmarker.setMap(null);
gmarkers = [];
}
var markersArray = [];
Every time your create a marker add it to markerArray
for (i = 0; i < locations.length; i++) {
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: icoImg,
map: map,
shadow: flagIcon_shadow,
title: locations[i][0]
});
markersArray.push(marker[i]);
}
After call deleteOverlays() to delete all maker from map.
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
in your case use this
function deleteOverlays() {
if (gmarkers) {
for (i in gmarkers) {
gmarkers[i].setMap(null);
}
gmarkers.length = 0;
}
}