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.
  1. /* ... */  
  2.   
  3. var marker = new google.maps.Marker({/* ... */});  
  4. var contentString = '...<img src="..."/>...';  
  5. var infoWindow = new google.maps.InfoWindow({  
  6.     content: contentString,  
  7. });  
  8. marker.addListener('click', function() {  
  9.     infoWindow.open(map, marker);  
  10. });  
  11.   
  12. /* ... */  
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):
  1. function makeMarker(map, markerOptions, infoOptions) {  
  2.     var marker = new google.maps.Marker(markerOptions);  
  3.     var infoWindow;  
  4.     if (infoOptions) {  
  5.         infoWindow = new google.maps.InfoWindow(infoOptions);  
  6.         marker.addListener('click', function() {  
  7.             infoWindow.open(map, marker);  
  8.         });  
  9.     }  
  10. }  
  11. function initialize() {  
  12.     //Koordináta meghatározása (középpont)  
  13.     var mapCenter = new google.maps.LatLng(46.884896, 17.942633);  
  14.   
  15.     //Térkép opciók  
  16.     var mapOptions = {  
  17.         center: mapCenter,  
  18.         zoom: 14,  
  19.         mapTypeId: google.maps.MapTypeId.ROADMAP  
  20.     };  
  21.   
  22.     //Térkép létrehozása  
  23.     var map = new google.maps.Map(  
  24.         document.getElementById("map"),  
  25.         mapOptions  
  26.     );  
  27.   
  28.     //Markerek  
  29.     var markerList = [  
  30.         {  
  31.             markerOptions: {  
  32.                 title: 'Ilona Apartmanház',  
  33.                 icon: 'img/icons/apartment.png',  
  34.                 position: new google.maps.LatLng(46.874190, 17.945323),  
  35.                 map: map,  
  36.             },  
  37.             infoOptions: {  
  38.                 content: '<p><b>Ilona Apartmanház</b></p><br><img src="img/info/apartmanhaz.jpg" alt="Ilona apartmanház" width="120" height="90"/>',  
  39.             }  
  40.         },  
  41.         {  
  42.             markerOptions: {  
  43.                 title: 'Szántódi komp kikötő',  
  44.                 icon: 'img/icons/ferry.png',  
  45.                 position: new google.maps.LatLng(46.883218, 17.918339),  
  46.                 map: map,  
  47.             },  
  48.             infoOptions: {  
  49.                 content: '<p><b>Szántódi kompok </b></p><img src="img/info/kompok.jpg" alt="Szántódi komp" width="120" height="90"/>',  
  50.             }  
  51.         },  
  52.         {  
  53.             markerOptions: {  
  54.                 title: 'Keszeg úti strand',  
  55.                 icon: 'img/icons/beach.png',  
  56.                 position: new google.maps.LatLng(46.879665, 17.900670),  
  57.                 map: map,  
  58.             },  
  59.             infoOptions: {  
  60.                 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',  
  61.             }  
  62.         }  
  63.     ];  
  64.       
  65.     var cMarker;  
  66.     for (var i = 0, ii = markerList.length; i < ii; ++i) {  
  67.         cMarker = markerList[i];  
  68.         makeMarker(map, cMarker.markerOptions, cMarker.infoOptions);  
  69.     }  
  70. }  
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.