google maps api v3 - targeting markers

google maps api v3 - targeting markers - javascript

I set my markers like this
var
marker,
i,
markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
markers.push(marker);
marker.addListener('mouseover', function() {
marker.setIcon("img/serve-bracket.png");
});
}
This only seems to attach the event handler on the last one. How do I add it to all markers

You need to wrap your addListener in a closure.
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
marker.setIcon("img/serve-bracket.png");
}
})(marker, i));
markers.push(marker);
}

Related

Two googlemaps box in the same javascript file with different locations

I'm trying to find MY MISTAKE in my code:
I want to add to maps to the same script file and I was able to do that with a conditional statement but, when I get to the part of the locations and markers, I'm not able to display my pins, my info windows, and icons.
Here's my code:
var map, locs;
function initMap() {
if (document.getElementById('map')) {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 01, lng: -01},
zoom: 15
});
var image = 'http:myimage.png';
var locations = [
['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 49.27597, -123.1185, 1]];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
} else if (document.getElementById('locs')) {
locs = new google.maps.Map(document.getElementById('locs'), {
center: {lat:02, lng: -02},
zoom: 4
});
var image = 'http:myimage.png';
var locations_two = [
['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 02, -02, 1]];
var infowindow = new google.maps.InfoWindow();
var marker_two, i;
for (i = 0; i < locations_two.length; i++) {
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations_two[i][0]);
infowindow.open(map, marker);
}
})(marker_two, i));
}
}
}
google.maps.event.addDomListener(window, "load", initMap);
#map {height: 500px;}
#locs {height: 500px;}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"><div>
<div id="locs"><div>
Both maps are in a different page, I'm able to see only the first one with locations, the second one come without location, markers and info windows.

Change
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: map,
icon: image
});
to
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: locs,
icon: image
});
You need to use locs because that is the second map object that you create and that is what you need to pass while creating the marker instead of map.
Also 01, 02 are not valid float values. You need to change them to 1, 2 which will make them valid float numbers.

How to access Google Maps markers after creating them dynamically?

I am creating markers for multiple points like this:
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
}
I then want to (with getPosition) access the positions (lat & long) of each marker when they are moved. How would I achieve that? There will most likely always be 2 markers on the map, so I would need to access marker 0 and marker 1 and log each of them when they are moved.
UPDATE 1:
I tried adding id: locations[i][0] to the marker and then accessing it with: console.log(marker.id); But that always returns the ID/name of the second marker, even if the first one is moved.

Use this inside the click listener to reference the marker thing that was clicked.
google.maps.event.addListener(marker, 'dragend', function(){
console.log(this.getPosition());
});

You store the markers into an array while creating them
var arr_marker=[];
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
arr_marker[] = marker;
}

Clustering markers with infowindow in googlemaps v3 api

I cant get the ClustererMarker to work. I want markers to cluster when they are close to each other and I have found:
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
But I cant get them to work with my code, either all markers disappear or only one is visible (not in the correct way). I hope someone can help me with my problem.
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

var gmarkers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);

animated gif in array in google map

I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.

One option is to create the marker with {optimized: false}:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click

Google Map API Custom Marker Image

I am looking for help to get a custom marker. The code is currently broken. Here is my script. When I put icon in the for loop, it breaks. When I remove it, everything works.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(35.239313, -41.073296),
mapTypeId: google.maps.MapTypeId.HYBRID
});
map.setOptions({ minZoom: 3, maxZoom: 15 });
var infowindow = new google.maps.InfoWindow();
var image = 'images/research-pin.png';
var marker, i;
In this loop when I add "icon" to the for loop, it does not display. I need to display multiple markers all using the same custom image.
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0]
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

You are missing a comma. This:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0] //<----- missing comma
icon: image
});
should be:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0], // <---- added comma
icon: image
});
You should be getting a syntax error.

Develop Reference

JavaScript is the programming language of the Web.

google maps api v3 - targeting markers - javascript

Related

Two googlemaps box in the same javascript file with different locations

How to access Google Maps markers after creating them dynamically?

Clustering markers with infowindow in googlemaps v3 api

animated gif in array in google map

Google Map API Custom Marker Image

Categories

Resources