[MALEFICENT]

Hallo ihr Lieben,

ich hoffe ich bin hier im richtigen Thread, da meine Frage doch etwas kompliziert ist.

und zwar möchte ich in mein Forum gerne eine Google Karte einbinden. Ich hatte zuerst bei Google Maps direkt nach einem Code gesucht zum "einbetten" aber da finde ich nur diese vereinfachte Variante mit dem "<iframe" Code. Nun hab ich eine Seite gefunden, bei der man sich den kompletten Code anzeigen lassen kann. Das Einbetten klappt damit wunderbar und nun möchte ich gerne meine Pins verknüpfen. Ich hätte gerne neben der Karte eine Tabelle in der die verschiedenen Markierungen sozusagen aufgelistet sind und sobald man mit der Maus über eine "Adresse" fährt soll diese in der Karte angezeigt werden, also der Bildausschnitt soll sozusagen zu der Markierung springen. Ich hoffe ich hab es einigermaßen verständlich erklärt und ihr wisst, was ich damit meine? *Kekse dalass*

Hier einmal der Code, den ich zum Einbinden in das Forum verwende:

Code:

<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>

<script>
   google.maps.event.addDomListener(window, 'load', init);
   var map;
   function init() {
       var mapOptions = {
           center: new google.maps.LatLng(40.782597,-73.971114),
           zoom: 14,
           zoomControl: true,
           zoomControlOptions: {
               style: google.maps.ZoomControlStyle.SMALL,
           },
           disableDoubleClickZoom: false,
           mapTypeControl: false,
           scaleControl: false,
           scrollwheel: true,
           panControl: false,
           streetViewControl: false,
           draggable : true,
           overviewMapControl: false,
           overviewMapControlOptions: {
               opened: false,
           },
           mapTypeId: google.maps.MapTypeId.ROADMAP,
       }
       var mapElement = document.getElementById('Manhattan');
       var map = new google.maps.Map(mapElement, mapOptions);
       var locations = [
['Central Park West', '', 'undefined', 'undefined', 'undefined', 40.78327901108392, -73.97107356961976, 'https://mapbuildr.com/assets/img/markers/default.png']
       ];
       for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
          if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
          if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
           marker = new google.maps.Marker({
               icon: markericon,
               position: new google.maps.LatLng(locations[i][5], locations[i][6]),
               map: map,
               title: locations[i][0],
               desc: description,
               tel: telephone,
               email: email,
               web: web
           });
link = '';     }

}
</script>
<style>
   #Manhattan {
       height:400px;
       width:550px;
   }
   .gm-style-iw * {
       display: block;
       width: 100%;
   }
   .gm-style-iw h4, .gm-style-iw p {
       margin: 0;
       padding: 0;
   }
   .gm-style-iw a {
       color: #4272db;
   }
</style>

<div id='Manhattan'></div>

[Jockl]

Hast Du Dir mal das Plugin Usermap angesehen? Vielleicht kommt das dem ja schon nahe, was Du brauchst....