ugrás a tartalomhoz

Google Maps JavaScript API Markersben fotó elhelyezés

tamasir · 2018. Jan. 22. (H), 17.00
Az egyik weboldalamon szeretnék egy google mapsban megjelentetni ikonokkal helyeket.Ez meg is történt és működik. Az ikonra ha rámegyek megjelenik egy buborék szöveggel, amit a sripteb rögzítek a title: sorban. Ide szeretnék a helyhez köthető fotót berakni, ami szintén a buborékban jelenne meg.
Sajnos erre nem találtam érdemi választ a google-ben.
Így néz ki a kód sorom:
//Marker strand 3 létrehozása

var image = 'img/icons/beach.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(46.888452, 17.955956),

map: map,

title: "Klapka uti strand",

icon : image

});
//Marker strand 4 létrehozása

var image = 'img/icons/beach.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(46.889417, 17.960972),

map: map,

title: "Táncsics uti strand",

icon : image

});

Ha lenne segítség megköszönném.
‹ HTML5 es Javascript tutorial html tablazatban a cella tartalom egymas tetejere ir. ›
 ■
1

InfoWindow?

Endyl · 2018. Jan. 22. (H), 18.19
Szerintem az InfoWindow-t keresed.

Hozz létre egyet, majd amikor a markerre kattintanak, meg tudod nyitni. Az InfoWindow tartalmaként megadhatsz HTML sztringet vagy DOM node-ot.

/* ... */

var marker = new google.maps.Marker({/* ... */});
var contentString = '...<img src="..."/>...';
var infoWindow = new google.maps.InfoWindow({
    content: contentString,
});
marker.addListener('click', function() {
    infoWindow.open(map, marker);
});

/* ... */
2

InfoWindow beépités

tamasir · 2018. Jan. 22. (H), 20.35
Megpróbáltam így beépíteni és sikerült. Az első marker-nél. Készítem a többinél is
Köszönöm a segítséget.
3

InfoWindow beépítés hiba

tamasir · 2018. Jan. 22. (H), 20.53
Még egyszer köszi. Szépen megjelennek a fotók és a szöveg is. Egy gondom van már csak, hogy nem a kitűző felett, vagy mellette jelenik meg az ablak, hanem a térkép közepén.
Ezen tudunk még változtatni?
4

Röviden: minden bizonnyal

Endyl · 2018. Jan. 22. (H), 22.05
Röviden: minden bizonnyal igen.

Hosszan: ha nem mutatod meg, hogy pontosan mit csinálsz, akkor sem én, sem más nem fog tudni segíteni, mert nem vagyunk gondolatolvasók. A fenti kód (vagy legalábbis azzal analóg) nálam működik az elvárások szerint.

Szóval mutass kódot, és akkor valaki majd észreveszi, hogy mi nincs rendben.
5

InfoWindow rossz megjelenése

tamasir · 2018. Jan. 23. (K), 11.40
Beépítettem a scripbe a kódokat, kitöltve az én adataimmal. Ha rákattintok az első iconra a térképen, jelenleg a harmadik ikonhoz tartozó (Keszeg úti strand)felugró ablak jelenik meg, a térkép közepén. Ugyan ez ha a második (Szántódi komp) ikonra kattintok,rossz ablak, rossz kép, rossz helyzet. A harmadik a helyes ablak, csak akkor meg a helyzete az ablaknak nem jó mert a térkép közepén jelenik meg.
function initialize() {

//Koordináta meghatározása (középpont)

var LatLong = new google.maps.LatLng(46.884896, 17.942633);

//Térkép opciók

var mapOptions = {

center: LatLong,

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

//Térkép létrehozása

var map = new google.maps.Map(

document.getElementById("map"),

mapOptions

);

//Marker létrehozása

var image = 'img/icons/apartment.png';

var marker = new google.maps.Marker({

position: new google.maps.LatLng(46.874190, 17.945323),

map: map,

title: "Ilona Apartmanház",

icon : image,
                });
                    var contentString = '<p><b>Ilona Apartmanház</b></p><br><img src="img/info/apartmanhaz.jpg" alt="Ilona apartmanház" width="120" height="90"/>';
                    var infoWindow = new google.maps.InfoWindow({
                    content: contentString,
                });
                    marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });
                //Marker szántodi komp létrehozása

var image = 'img/icons/ferry.png';

var marker = new google.maps.Marker({

position: new google.maps.LatLng(46.879665, 17.900670),

map: map,

title: "Szántódi komp kikötő",

icon : image

                });
                    var contentString = '<p><b>Szántódi kompok </b></p><img src="img/info/kompok.jpg" alt="Szántódi komp" width="120" height="90"/>';
                    var infoWindow = new google.maps.InfoWindow({
                    content: contentString,
                });
                    marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });
                //Marker strand 1 létrehozása

var image = 'img/icons/beach.png';

var marker = new google.maps.Marker({

position: new google.maps.LatLng(46.883218, 17.918339),

map: map,

title: "Keszeg úti strand",

icon : image

});
                    var contentString = '<p><b>Keszeg úti szabadsdrand </b></p><img src="img/info/strand-1.jpg" alt="Keszeg úti strand" width="120" height="90"/>,<br> GPS:46.883218, 17.918339';
                    var infoWindow = new google.maps.InfoWindow({
                    content: contentString,
                });
                    marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });
                //Marker strand 2 létrehozása

Itt az oldal
6

A megoldás szempontjából

Endyl · 2018. Jan. 23. (K), 16.02
A megoldás szempontjából lényeges problémád az, hogy felülírod a marker és infoWindow változóidat rendszeresen, így mire az initialize függvény végére érsz, már az utolsóként létrehozott markert és infoWindowt fogják tartalmazni, és a closure-nek nevezett -egyébként nagyon hasznos: 1, 2, 3- dolog miatt az összes eseménykezelőd ezeket az értékeket fogja látni, és bármelyik markerre kattintasz, az utolsó markernél fog megjelenni az utolsó infoWindow.

A legalapabb megoldás valami ilyesmi lenne (ki nem próbáltam, lehet, hogy van benne valahol hiba, a lényeg a rendezési elv):

function makeMarker(map, markerOptions, infoOptions) {
	var marker = new google.maps.Marker(markerOptions);
	var infoWindow;
	if (infoOptions) {
		infoWindow = new google.maps.InfoWindow(infoOptions);
		marker.addListener('click', function() {
			infoWindow.open(map, marker);
		});
	}
}
function initialize() {
	//Koordináta meghatározása (középpont)
	var mapCenter = new google.maps.LatLng(46.884896, 17.942633);

	//Térkép opciók
	var mapOptions = {
		center: mapCenter,
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	//Térkép létrehozása
	var map = new google.maps.Map(
		document.getElementById("map"),
		mapOptions
	);

	//Markerek
	var markerList = [
		{
			markerOptions: {
				title: 'Ilona Apartmanház',
				icon: 'img/icons/apartment.png',
				position: new google.maps.LatLng(46.874190, 17.945323),
				map: map,
			},
			infoOptions: {
				content: '<p><b>Ilona Apartmanház</b></p><br><img src="img/info/apartmanhaz.jpg" alt="Ilona apartmanház" width="120" height="90"/>',
			}
		},
		{
			markerOptions: {
				title: 'Szántódi komp kikötő',
				icon: 'img/icons/ferry.png',
				position: new google.maps.LatLng(46.883218, 17.918339),
				map: map,
			},
			infoOptions: {
				content: '<p><b>Szántódi kompok </b></p><img src="img/info/kompok.jpg" alt="Szántódi komp" width="120" height="90"/>',
			}
		},
		{
			markerOptions: {
				title: 'Keszeg úti strand',
				icon: 'img/icons/beach.png',
				position: new google.maps.LatLng(46.879665, 17.900670),
				map: map,
			},
			infoOptions: {
				content: '<p><b>Keszeg úti szabadsdrand </b></p><img src="img/info/strand-1.jpg" alt="Keszeg úti strand" width="120" height="90"/>,<br> GPS:46.883218, 17.918339',
			}
		}
	];
	
	var cMarker;
	for (var i = 0, ii = markerList.length; i < ii; ++i) {
		cMarker = markerList[i];
		makeMarker(map, cMarker.markerOptions, cMarker.infoOptions);
	}
}
Létezne ennél szebb megoldás is, de ha nem csak fércelni szeretnél, akkor remélhetőleg magad is utánanézel a dolgoknak.



Egyébként változókat sem szerencsés újradeklarálni, szóval egy scope-ban csak egy "var marker = ...;" legyen például.
7

Működik

tamasir · 2018. Jan. 23. (K), 16.48
Nagyon köszönöm így már működik. Most beépítem az összeset és utána fogok finomítani és a belinkelt oldalakat átnézem, tanulmányozom. Köszönöm a segítségedet.