Using Google Maps API to add an infoWindow to each marker. Markers come from an array.
Although, infoWindow only shows up for the first marker, not the others. Why? Thanks.
function set_markers(array) {
var mapOptions = {
zoom: 13
}
for (var i = 0; i < array.length; i++) {
var single_location = array[i];
var myLatLng = new google.maps.LatLng(single_location[1], single_location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: single_location[0]
});
var infowindow = new google.maps.InfoWindow({
content: ""
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<h3>'+this.title+'</h3>');
infowindow.open(map,this);
});
}
var infowindow = new google.maps.InfoWindow();
function set_markers(array) {
var mapOptions = {
zoom: 13
};
for (var i = 0; i < array.length; i++) {
var single_location = array[i];
var myLatLng = new google.maps.LatLng(single_location[1], single_location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: single_location[0]
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<h3>' + this.title + '</h3>');
infowindow.open(map, this);
});
}
}
This is untested since you didn't post a MCVE.
Related
I have Google Map which currently contains 5 pins in one var.
Why if I have many locations in my var, then the map is loading very slow?
My point is:
How I can speed up loading my Google Map if I have over 100 pins on same map?
Code:
<div id='main_map'></div>
<script>
var map;
var markers = [];
var locations = [['content of the popup', 51.248016, 22.567579, '3'],'content of the popup', 21.248016, 22.567579, '3'],'content of the popup', 31.248016, 22.567579, '2'],'content of the popup', 41.248016, 22.567579, '7'],'content of the popup', 71.248016, 22.567579, '3'],];
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var pinBase = '/static/img/user/pin-';
function initMap() {
var map = new google.maps.Map(document.getElementById('main_map') {
zoom: 2, center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
});
for (var i = 0; i < locations.length; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
icon: pinBase + locations[i][3] + '.png'
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content: this.html,
position: this.getPosition()
});
map.panTo(this.getPosition());
smoothZoom(this.getMap(), 13, map.getZoom());
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(true);
infowindow.open(map);
});
let toggleMarkers = (checkbox) => {
var isChecked = checkbox.checked;
markers.map((elem) => {
elem.setVisible(isChecked);
});
}
}
}
initMap();
</script>
I am using google maps API to make some custom markers and i want to open a custom info window. I have been trying to set the position of the info window but its always opening on the extreme top left.
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
marker[i] = infowindow = new google.maps.InfoWindow({
content: html,
pixelOffset: new google.maps.Size(200, 0)
});
marker[i] = new google.maps.Marker({
position: position,
icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, marker[i]);
});
}
I think your problem lies how to create marker and info window in your code.To create multiple markers in map, see code below .
Fiddle demo
function initMap() {
var myLatLng = {
lat: 40.4173,
lng: -82.9071
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
(function(markers) {
var position = new google.maps.LatLng(markers[0], markers[1]);
var icon = markers[2];
var infowindow = new google.maps.InfoWindow({
content: 'html',
pixelOffset: new google.maps.Size(200, 0)
});
var markerss = new google.maps.Marker({
position: position,
map: map,
//icon: icon,
});
google.maps.event.addListener(markerss, 'click', function() {
infowindow.open(map, markerss);
});
})(markers[i]);
}
}
marker[i] is not defined in this line:
infowindow.open(map, marker[i]);
Without a defined anchor, the infowindow ends up in the upper left hand corner of the map.
You can use this for the anchor in the mouseover event handler function:
infowindow.open(map, this);
You probably also want to remove the:
pixelOffset: new google.maps.Size(200, 0)
proof of concept fiddle
code snippet:
var geocoder;
var map;
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 markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var html = "marker";
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
var infowindow = new google.maps.InfoWindow({
content: html,
// pixelOffset: new google.maps.Size(200, 0)
});
var marker = new google.maps.Marker({
position: position,
// icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, this);
});
bounds.extend(position);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
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>
I have this script for links from google map markers:
<script type="text/javascript">
var locations = [['Test 1','55','13','url1'],['Test 2','45','17','url2']];
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(50,15),
zoom: 3,
mapTypeId: google.maps.MapTypeId.SATELLITE};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
setMarkers(map,locations)
}
function setMarkers(map,locations)
{
var marker, i
for(i = 0; i < locations.length; i++)
{
var arr = i
var name = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var adress = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: name,
url: adress,
position: latlngset
});
google.maps.event.addListener(marker, 'click', function() {window.location.href = this.url;});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
...and, I need generate infowindows from markers instead of links, do you have any simple idea?
Google map clickable infowindows from markers
Hy i am unable to display multiple markers in Google Maps V3, i am getting the coordinates correctly but not displays on map. Also no errors in console
map_items[0] = title
map_items[1] = 55.153766, 11.909180
map_items[2] = link
map_items[3] = text
all of them appear correctly if i do an alert.
example
"Title","51.00150763193481, -2.5659284999999272", "link", "text"
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
}
}
google.maps.LatLng() takes two parameters, not one, so:
var latlon = map_items[1].split(',');
var myLatlng = new google.maps.LatLng(parseFloat(latlon[0]), parseFloat(latlon[1]));
though in fact, it would be better to use objects rather than an array in which each item contains different data types, for example:
marker_data[0] = {
"lat": 55.153766,
"lon": 11.909180,
"title": "My Title",
"link": "http://stackoverflow.com"
}
//etc...
and then you'd access it like this:
var myLatlng = new google.maps.LatLng(marker_data[0].lat, marker_data[0].lon);
Assuming map_items[1] is string
if (temp[x][1]) {
var map_items = temp[x];
var latlng = map_items[1].split(",");
var myLatlng = new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1]));
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">' + map_items[0] + '<br /><p>' + map_items[3] + '</p></div>');
infowindow.open(map, marker);
});
}
I think only last map_items would be available when you click on any marker. Creating a different context may solve your problem.
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function AttachEventToMarker(marker, map_items){
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
AttachEventToMarker(marker, map_items);
}
}
}
Here is my fiddle link.
I added markers to the maps, also infowindows for every marker.
But only one infowindow appears?
Here you go:
var ships = [['63.44204833', '10.40340333'], ['63.49261667', '9.92661167'], ['63.43243500', '10.37030833'], ['63.43896000', '10.40036167'], ['63.64856000', '10.67950167'], ['63.43330667', '10.36608000'], ['63.43840500', '10.40874000'], ['63.78920833', '11.19232167'], ['63.45155667', '10.20245833'], ['63.43366667', '10.36150000'], ['63.43956667', '10.40019333'], ['63.47066500', '10.33613500'], ['63.43928333', '10.40971667'], ['63.43822000', '10.39873167']];
var map;
var infowindow = new google.maps.InfoWindow({
content: 'bla'
});
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(63.65, 10.65);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
createInfoWindow(marker);
}
function createInfoWindow(m) {
google.maps.event.addListener(m, 'click', function() {
infowindow.open(map, m);
});
}
function processShips(ships) {
for (var i = 0; i < ships.length; i++) {
createMarker(ships[i][0], ships[i][1], 'bla');
}
}
function load(ships) {
initialize();
processShips(ships);
}
load(ships);
Working example.
Simply add var in front of marker in your createMarker function
var marker = new google.maps.Marker({....