XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Google Map mit 2 Standorten mit Beschreibung (http://xhtmlforum.de/showthread.php?t=73144)

denizYoshi 09.02.2017 19:12

Google Map mit 2 Standorten mit Beschreibung
 
Hallo Freunde,

bei G.Map hab ich zwei Standorte eingefügt, was es wunderbar auf der Map anzeigt. Nun wollte ich bei einem Klick auf das jeweilige Standort, dass er mir eine Beschreibung anzeigt. Bei marker1 funktioniert es wunderbar, jedoch wenn ich auf den marker2 klicke, passiert nix.

Vllt übersah ich einfach was und hoffe, dass ihr mir weiter helfen könnt-

protonenbeschleuniger 09.02.2017 20:43

Zitat:

Zitat von denizYoshi (Beitrag 550518)
Vllt übersah ich einfach was und hoffe, dass ihr mir weiter helfen könnt-

Code:

if($("#map").length)
{
                //google map
                var coordinate = new google.maps.LatLng(50.044858, 8.164307);
                var coordinate2 = new google.maps.LatLng(50.045694, 8.157946);

                var content1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Wunschtext</h1>'+
                '<div id="bodyContent">'+
                '<p><b>wurschtelt</b>, Blabla</b>, blabla ' +
                '</div>'+
                '</div>';

                var content2 = '<div id="content2nd">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading"> Wunschtext 2</h1>'+
                '<div id="bodyContent">'+
                '<p><b> Wunschtext 2</b>, blabla</b>, blablabla ' +
                '</div>'+
                '</div>';

                var infowindow = new google.maps.InfoWindow({
                        content: content1
                });

                var infowindow2 = new google.maps.InfoWindow({
                        content2nd: content2
                });


Schau dir mal die zwei Aufrufe von InfoWindow() an. Fällt dir was auf?

https://developers.google.com/maps/d...pt/infowindows

denizYoshi 10.02.2017 00:27

hmmm nein leider nicht?

kannst du bitte mal nachhelfen?
sitzt da schon etwas länger dran :idea:

protonenbeschleuniger 10.02.2017 09:39

Die Fehlerkonsole ist leer?

denizYoshi 10.02.2017 09:55

Ja gibt keine Fehler aus

Ich werde einfach nicht schlau draus

protonenbeschleuniger 10.02.2017 10:00

Was hast du denn versucht um das Problem einzukreisen?

Hast du etwas gemacht um mal festzustellen, ob der clickhandler aufgerufen wird?

Weil, wenn der Code richtig ist, dann muss er auch funktionieren oder du hast woanders einen Fehler, den können wir aber nicht finden. D.h. ohne ein konkretes Beispiel wird's schwierig.

denizYoshi 10.02.2017 16:24

ok hab es gelöst

für die Nachwelt die evtl das gleiche Problem bekommen sollten

man muss den marker2 erstmal initialisieren
:mrgreen::mrgreen::mrgreen:

protonenbeschleuniger 10.02.2017 18:56

Zitat:

Zitat von denizYoshi (Beitrag 550528)
man muss den marker2 erstmal initialisieren
:mrgreen::mrgreen::mrgreen:

Das hast du doch in deinem Code gemacht? Oder was meinst du mit intialisieren?
Code:

if($("#map").length)
{
                //google map
                var coordinate = new google.maps.LatLng(50.044858, 8.164307);
                var coordinate2 = new google.maps.LatLng(50.045694, 8.157946);

                var content1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Wunschtext</h1>'+
                '<div id="bodyContent">'+
                '<p><b>wurschtelt</b>, Blabla</b>, blabla ' +
                '</div>'+
                '</div>';

                var content2 = '<div id="content2nd">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading"> Wunschtext 2</h1>'+
                '<div id="bodyContent">'+
                '<p><b> Wunschtext 2</b>, blabla</b>, blablabla ' +
                '</div>'+
                '</div>';

                var infowindow = new google.maps.InfoWindow({
                        content: content1
                });

                var infowindow2 = new google.maps.InfoWindow({
                        content2nd: content2
                });

                var mapOptions = {
                        zoom: 16,
                        center: coordinate,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        streetViewControl: false,
                        mapTypeControl: false,
                        scrollwheel: parseInt($("#map").data("scroll-wheel"), 10),
                        draggable: parseInt($("#map").data("draggable"), 10),
                        styles: [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#8ccaf1" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "off" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "color": "#ffffff" }, { "visibility": "simplified" } ] } ]
                };
               
                map = new google.maps.Map(document.getElementById("map"),mapOptions);
               
                //1 Ort
                marker = new google.maps.Marker({
                        position: new google.maps.LatLng(50.044858,8.164307),
                        map: map,
                        icon: new google.maps.MarkerImage("images/map_pointer.png", new google.maps.Size(38, 48), null, new google.maps.Point(18, 48))
                });

                marker.addListener('click', function() {
                        infowindow.open(map, marker);
                });

               
                //2 Map Ort
                marker2 = new google.maps.Marker({
                        position: new google.maps.LatLng(50.045694, 8.157946),
                        map: map,
                        icon: new google.maps.MarkerImage("images/map_pointer.png", new google.maps.Size(38, 48), null, new google.maps.Point(18, 48))
                });

                marker2.addListener('click', function() {
                        infowindow2.open(map, marker2);
                });

                map.addOverlay(marker);
                map.addOverlay(marker2);
        }



Alle Zeitangaben in WEZ +2. Es ist jetzt 15:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023