How to set individual Google Maps Marker Icons

How to set individual Google Maps Marker Icons - javascript

I know this question was asked more often. But for my code, unfortunately, none of the answers work for me. I have the following Google Maps code and would like to set my own google maps marker icon.
For this I have tried the following code. Unfortunately without success.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?
key=key"></script>
<div id="map_canvas"></div>
<script>
var locations = [
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4]
];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: new google.maps.LatLng(51.5151, 10.4545),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:
[
]
});
function setMarkers(map) {
var image = {
url: 'marker-path/marker.jpg',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
icon: image,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}}
init();
</script>
Unfortunately, no marker is displayed. Where is the problem?

First of all, make sure that (1) the path to your image is correct, and (2) your image's size is in fact 20 x 32 (otherwise change Size accordingly).
Your code snippet has lots of issues, and I have amended it as follows to be able to reproduce it from my side:
<script>
var locations = [
['title', 41.38879, 2.15899, 'https://www.domain.de/', 4],
['title', 48.85341, 2.3488, 'https://www.domain.de/', 4],
['title', 52.52437, 13.41053, 'https://www.domain.de/', 4]
];
var map;
var markers = [];
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: new google.maps.LatLng(51.5151, 10.4545),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: []
});
setMarkers(map);
}
function setMarkers(map) {
var image = {
url: 'maker-path/maker.jpg',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: { lat: locations[i][1], lng: locations[i][2] },
map: map,
icon: image,
html: locations[i][0],
id: i
});
google.maps.event.addListener(markers[i], 'click', function() {
var infowindow = new google.maps.InfoWindow({
id: this.id,
content: this.html,
position: this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
</script>
You can also test this first by replacing "maker-path/maker.jpg" with e.g. https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png.
You'll see how the icon from Google's documentation is indeed displayed.
If your own icon is not, then that means that you need to double check pointers (1) and/or (2) I stated above.
Hope this helps!

Related

How to add multiple markers in Gmap3?

I am trying to add multiple marker in gmap3. but it can't work.
If anybody any idea how to add multiple location in gmap3 API.
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker({
position: contactmap,
icon: 'assets/img/map-marker.gif'
})
This code is view only one marker. So how can I add multiple marker in Map?.

So finally I found the Right solution with myself so thanks to support me.
var locations = [
['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];
var map = new google.maps.Map(document.getElementById('tm-map'), {
zoom: 10,
center: new google.maps.LatLng(24.005421, 38.197395),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
console.log(markers[0]);

create an array of markers and then push each new marker object into that array and finally pass array into your marker()
follow this github response https://github.com/jbdemonte/gmap3/issues/123
for any future problems refer to their github page.
// this is how you create array
var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}]
var markers = [];
$.each(multiadress, function(key, val){
var latLng = val.latLng
markers.push({
position: latLng,
content: val.content
});
});
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(markers)
accept answer if it helps you.

You can pass a markerList:
var markers = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
];
function markerSetup(markers){
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var icon = {
url: "../Content/Images/Car.png", // url
scaledSize: new google.maps.Size(50, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
// alert(markers[0].lat)
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// map.setMap(trafficLayer);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: icon,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
map.setZoom(12)
});
}
It's workable code. Hope it's help you.

I do it like this:
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
)

Add marker with label in google map's every end of polyline

I've multiple polylines, I want a marker on every end and start of polyline with a label, I am tracking bike movement, I am getting the polyline but i need to display the time on poly line or on the end point, if i can show the time in the polyline it would be great. I am developing a tracking system, i am getting the lat long, of start and end points i am also abple to draw polylines, i want to display time on the polyline or at least display a marker on every end and show the time... below is my code
var bikearray = [];
$('#searchbtn').on('click', function() {
$.ajax({
url:'http://metrobikes.in/api/a2b-bike-movement-on-map',
method:"GET",
data : {
start_Date : "2017-12-11",
end_date : "2018-01-24",
bike_number : "KA-51-D-6109"
},
}).done(function(data){
bikearray = data.result.data;
initMap();
});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{lat: from_lat, lng: from_long},
{lat: to_lat, lng: to_long}
],
icons: [{
icon: lineSymbol,
repeat:'35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}

To add a marker to the beginning and end of the polyline, add a marker to the beginning point and to the ending point. To add the time in an InfoWindow on the end marker, add that as well (and trigger a click on it to open it):
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {lat: from_lat, lng: from_long}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {lat: to_lat, lng: to_long}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
proof of concept fiddle
code snippet:
var bikearray = [{
from_lat: 12.98966,
from_long: 77.653637,
to_lat: 12.9715987,
to_long: 77.5945626,
colour: "blue",
time: "12:00"
},
{
from_lat: 13.0826802,
from_long: 80.2707184,
to_lat: 12.9922145,
to_long: 77.7159,
colour: "red",
time: "11:00"
},
]
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for (i = 0; i < bikearray.length; i++) {
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {
lat: from_lat,
lng: from_long
}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long = parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {
lat: to_lat,
lng: to_long
}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}
})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{
lat: from_lat,
lng: from_long
},
{
lat: to_lat,
lng: to_long
}
],
icons: [{
icon: lineSymbol,
repeat: '35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Looks like this was already answered in Text Within Polyline Google Maps V3
One solution would be using this library from github:
https://github.com/googlemaps/js-map-label
You could use it like this:
var labelPosition = new google.maps.LatLng(middle_lat, middle_long);
var mapLabel = new MapLabel({
text: "Your text",
position: labelPosition ,
map: map,
fontSize: 12
});
You would have to calculate the Middle-Point between the two points.

How to enter detailed multiple infowindows

I am attempting to create a map with route linked markers.. with one infowindow opening for each marker with mouseover, and a more detailed one with Click.
The more detailed would be similar to
Google Maps Info Windows
My version works until I attempt to change what I currently have for the click infowindow.. then it all stops or I loose markers or polylines..
I have tried all the answers I have found so far but without success so thinking I have something else wrong ....
var map;
var clicked = false;
var locations = [
//start of locations list
['Sydney', -33.8688197, 151.2092955, 1, 'https://en.wikipedia.org/wiki/Sydney'],
['Vancouver', 49.2827291, -123.1207375, 2, 'https://en.wikipedia.org/wiki/Vancouver'],
['Vancouver', 49.2827291, -123.1207375, 3, 'https://en.wikipedia.org/wiki/Vancouver'],
['Kamloops', 50.6745220, -120.3272674, 4, 'https://en.wikipedia.org/wiki/Kamloops'],
['Jasper,Canada', 52.8736786, -118.0813581, 5, 'https://en.wikipedia.org/wiki/Jasper,Canada'],
['Banff', 51.1783629, -115.5707694, 6, 'https://en.wikipedia.org/wiki/Banff'],
['Lake Louise,Canada', 51.4253705, -116.1772552, 7, 'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
['Calgary', 51.0486151, -114.0708459, 8, 'https://en.wikipedia.org/wiki/Calgary'],
['Canadian Rockies', 54.1521752, -120.1585339, 9, 'https://en.wikipedia.org/wiki/Canadian Rockies'],
['Niagara Falls', 43.0962143, -79.0377388, 10, 'https://en.wikipedia.org/wiki/Niagara Falls'],
['New York', 40.7127837, -74.0059413, 11, 'https://en.wikipedia.org/wiki/New York'],
['Rockerfeller Building', 40.7587402, -73.9786736, 12, 'https://en.wikipedia.org/wiki/Rockerfeller Building'],
['Statue Of Liberty', 40.6892494, -74.0445004, 13, 'https://en.wikipedia.org/wiki/Statue Of Liberty'],
['Empire State Building', 40.7484405, -73.9856644, 14, 'https://en.wikipedia.org/wiki/Empire State Building'],
['Washington D.C.', 38.9071923, -77.0368707, 15, 'https://en.wikipedia.org/wiki/Washington D.C.'],
['Utah', 39.3209801, -111.0937311, 16, 'https://en.wikipedia.org/wiki/Utah'],
['Arches National Park', 38.7330810, -109.5925139, 17, 'https://en.wikipedia.org/wiki/Arches National Park'],
['Las Vegas', 36.1699412, -115.1398296, 18, 'https://en.wikipedia.org/wiki/Las Vegas'],
['Bryce National Park', 37.5930377, -112.1870895, 19, 'https://en.wikipedia.org/wiki/Bryce National Park'],
['Zion national Park', 37.2982022, -113.0263005, 20, 'https://en.wikipedia.org/wiki/Zion national Park'],
['San Francisco', 37.7749295, -122.4194155, 21, 'https://en.wikipedia.org/wiki/San Francisco'],
['Alcatraz', 37.8269775, -122.4229555, 22, 'https://en.wikipedia.org/wiki/Alcatraz'],
['Yosemite', 37.8651011, -119.5383294, 23, 'https://en.wikipedia.org/wiki/Yosemite'],
['San Francisco', 37.7749295, -122.4194155, 24, 'https://en.wikipedia.org/wiki/San Francisco'],
['Sydney', -33.8688197, 151.2092955, 25, 'https://en.wikipedia.org/wiki/Sydney'],
//end of locations list
];
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33.868819, 151.2092966)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
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
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', function() {
if (!clicked) {
infowindow.close();
}
});
google.maps.event.addListener(marker, 'click', function() {
clicked = true;
infowindow.setContent("Coming !!");
infowindow.open(map, this);
});
google.maps.event.addListener(infowindow,
'closeclick',
function() {
clicked = false
})
}
var lineCoordinates = locations.map(function(val) {
return new google.maps.LatLng(val[1], val[2]);
});
var tripPath = new google.maps.Polyline({
path: lineCoordinates,
geodesic: true,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
tripPath.setMap(map);
}
initialize();
Current jsfiddle version

I am not completely sure what I finally fixed .. or exactly where the original was going wrong... but I now have a working version.
So in case anyone else is struggling to find a answer to the same idea, here is a copy of the new version.
Working Fiddle
var map
var clicked = false
var locations = [
['Sydney', -33.8688197, 151.2092955, 1,'https://en.wikipedia.org/wiki/Sydney'],
['Vancouver', 49.2827291, -123.1207375, 2,'https://en.wikipedia.org/wiki/Vancouver'],
['Vancouver', 49.2827291, -123.1207375, 3,'https://en.wikipedia.org/wiki/Vancouver'],
['Kamloops', 50.6745220, -120.3272674, 4,'https://en.wikipedia.org/wiki/Kamloops'],
['Jasper,Canada', 52.8736786, -118.0813581, 5,'https://en.wikipedia.org/wiki/Jasper,Canada'],
['Banff', 51.1783629, -115.5707694, 6,'https://en.wikipedia.org/wiki/Banff'],
['Lake Louise,Canada', 51.4253705, -116.1772552, 7,'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
['Calgary', 51.0486151, -114.0708459, 8,'https://en.wikipedia.org/wiki/Calgary'],
['Canadian Rockies', 54.1521752, -120.1585339, 9,'https://en.wikipedia.org/wiki/Canadian Rockies'],
['Niagara Falls', 43.0962143, -79.0377388, 10,'https://en.wikipedia.org/wiki/Niagara Falls'],
['New York', 40.7127837, -74.0059413, 11,'https://en.wikipedia.org/wiki/New York'],
['Rockerfeller Building', 40.7587402, -73.9786736, 12,'https://en.wikipedia.org/wiki/Rockerfeller Building'],
['Statue Of Liberty', 40.6892494, -74.0445004, 13,'https://en.wikipedia.org/wiki/Statue Of Liberty'],
['Empire State Building', 40.7484405, -73.9856644, 14,'https://en.wikipedia.org/wiki/Empire State Building'],
['Washington D.C.', 38.9071923, -77.0368707, 15,'https://en.wikipedia.org/wiki/Washington D.C.'],
['Utah', 39.3209801, -111.0937311, 16,'https://en.wikipedia.org/wiki/Utah'],
['Arches National Park', 38.7330810, -109.5925139, 17,'https://en.wikipedia.org/wiki/Arches National Park'],
['Las Vegas', 36.1699412, -115.1398296, 18,'https://en.wikipedia.org/wiki/Las Vegas'],
['Bryce National Park', 37.5930377, -112.1870895, 19,'https://en.wikipedia.org/wiki/Bryce National Park'],
['Zion national Park', 37.2982022, -113.0263005, 20,'https://en.wikipedia.org/wiki/Zion national Park'],
['San Francisco', 37.7749295, -122.4194155, 21,'https://en.wikipedia.org/wiki/San Francisco'],
['Alcatraz', 37.8269775, -122.4229555, 22,'https://en.wikipedia.org/wiki/Alcatraz'],
['Yosemite', 37.8651011, -119.5383294, 23,'https://en.wikipedia.org/wiki/Yosemite'],
['San Francisco', 37.7749295, -122.4194155, 24,'https://en.wikipedia.org/wiki/San Francisco'],
['Sydney', -33.8688197, 151.2092955, 25,'https://en.wikipedia.org/wiki/Sydney'],
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function(){
clicked = true;
infowindow.setContent(locations[i][4]);
infowindow.open(map, marker);
setTimeout(function () { infowindow.close(); }, 8000);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', function() {
if (!clicked) {
infowindow.close();
}
});
var lineCoordinates = locations.map(function(val) {
return new google.maps.LatLng(val[1], val[2]);
});
var tripPath = new google.maps.Polyline({
path: lineCoordinates,
geodesic: true,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
tripPath.setMap(map);
}
initialize();
Next on my list
Add "tabbed" infowindows
Add detailed infowindows including pictures
Open infowindow links in lightbox type windows

How do i access all my google maps markers

I am not seeing it i'll think if one of you looks at it can immediately tell me what i have to do. Now i resize my marker but it only takes the last marker of the array.
here the code I'll loop trough the array of object markers:
var locations = [
[{id: 1, lat: 51.523229192354066, lng: 5.139241042480535, content: 'Title A'}],
[{id: 2, lat: 51.52309568310267, lng: 5.139251771316594, content: 'Title B'}],
[{id: 3, lat: 51.5229888754197, lng: 5.139434161529607, content: 'Title C'}],
[{id: 4, lat: 51.52284868995566, lng: 5.139487805709905, content: 'Title D'}],
[{id: 5, lat: 51.522715179588666, lng: 5.139670195922918, content: 'Title E'}],
[{id: 6, lat: 51.52258166883027, lng: 5.1397989419556325, content: 'Title F'}],
[{id: 7, lat: 51.52242813097418, lng: 5.139927687988347, content: 'Title G'}],
[{id: 8, lat: 51.52227793039666, lng: 5.139927687988347, content: 'Title H'}],
[{id: 9, lat: 51.522625059869696, lng: 5.138688507423467, content: 'Title I'}]
];
for (i = 0; i < locations.length; i++) {
var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};
marker = new google.maps.Marker({
position: myLatLng,
icon: icon1,
map: map
});
map.addListener('zoom_changed', function() {
if (map.getZoom() === 17) {
marker.icon.scaledSize = new google.maps.Size(32, 32);
marker.icon.size = new google.maps.Size(32, 32);
marker.setMap(map);
}
if (map.getZoom() === 18) {
console.log(marker[i]);
marker.icon.scaledSize = new google.maps.Size(90, 90);
marker.icon.size = new google.maps.Size(90, 90);
marker.setMap(map);
}
});
If i try to access marker[i].icon it is undefined. Please can somebody help me out to use size ALL the markers.
Here is a fiddle for a better view zoom in and out to see what happens only one marker change in size:
https://jsfiddle.net/sylvanR/a8z0yyeq/10/

The problem is this: you're looping over all your markers, adding a new event listener for the map's zoom_changed event. In each of those event listeners, you're referring to the variable marker. This event listener function doesn't get executed at the moment you define it, it only happens when the zoom changes obviously. So at that point, the variable marker will equal whatever it was at the very last iteration of your for loop.
Instead you need to change how you setup this event listener, something like this:
for (i = 0; i < locations.length; i++) {
var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};
marker = new google.maps.Marker({
position: myLatLng,
icon: icon1,
map: map
});
setMarkerSize(marker);
}
function setMarkerSize(marker) {
var icon = marker.icon;
map.addListener('zoom_changed', function() {
if (map.getZoom() === 16) {
icon.scaledSize = new google.maps.Size(15, 15);
icon.size = new google.maps.Size(15, 15);
marker.setIcon(icon);
console.log(marker.icon.size);
}
if (map.getZoom() === 17) {
icon.scaledSize = new google.maps.Size(32, 32);
icon.size = new google.maps.Size(32, 32);
marker.setIcon(icon);
console.log(marker.icon.size);
}
if (map.getZoom() === 18) {
icon.scaledSize = new google.maps.Size(90, 90);
icon.size = new google.maps.Size(90, 90);
marker.setIcon(icon);
console.log(marker.icon.size);
}
});
}
In this case, marker inside the setMarkerSize function is a local variable that will be different each time you call the function.

Google Maps API 3 - Info Window Issue [duplicate]

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 9 years ago.
What do I need to add & where - to make my markers popup the info window, using my var locations txt?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
setMarkers(map, locations);
}
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function setMarkers(map, locations) {
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height: 300px;"></div>

Create a global variable (or within your setMarkers function), infowindow:
var infowindow = new google.maps.InfoWindow({
content: ""
});
Then within your loop, call a new function, passing various parameters you'll require:
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
Then create a new global function which binds the click event to markers and opens the infowindow with the specified content:
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
Update: here's the complete code I'd use
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content: ""
});
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var i, location, myLatLng, marker;
for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
}
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

You need to bind click event to your markers i.e after the markers are created you need to store them in an array. Then add the below code
var marker = new google.maps.Marker({
position: position
});
var infowindow = new google.maps.InfoWindow({
content:"Any content or latitude longitude info"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Here its bit tricky, i.e if there are multiple markers then you need build the marker variable accordingly. In your case may be you can append the for loop counter 'i' to the marker variable such as marker_+i and then fire the click event on those variables inside the same loop.

We Keep Coding

JavaScript is the programming language of the Web.

How to set individual Google Maps Marker Icons - javascript

Related

How to add multiple markers in Gmap3?

Add marker with label in google map's every end of polyline

How to enter detailed multiple infowindows

How do i access all my google maps markers

Google Maps API 3 - Info Window Issue [duplicate]

Categories

Resources