nicht angemeldet
Google Maps Api V3 eigener Overlayer
0 
JürgenB
Google Maps Api V3 eigener Overlayer
Hallo Zusammen,
ich muss einen Code für die V2 auf die V3 bringen und kenne mich leider mit beiden recht wenig aus, aber vielleicht weiß hier jemand weiter.
Ich möchte einen eigenen Marker in der Map für eine Anfahrtskarte erstellen und nach dem Klick soll ein eigener Overlayer mit allen Kontaktdaten erscheinen, der wie die klassischen Fenster ein "X" in der rechte Ecke hat, welches beim Klick den Overlayer schließt, bzw löscht oder ausblendet.
Zudem soll der Overlayer bei jedem zoomen der Karte wieder neu genau in der Mitte erscheinen.
Der eigene Marker geht und beim Klick erscheint der Overlayer, nur leider funktioniert das X und das neue ausrichten in der Mitte nicht und ich weiß leider im Moment nicht weiter und hoffe daher das jemand die Lösung weiß oder mir sonst irgendwie weiter helfen kann.
var countryCode = location.pathname.substring(1, location.pathname.substring(1,location.pathname.length).indexOf("/")+1);
$.ajax({
url: '/scripts/approach.xml',
async: false,
success: function(data){
$(data).find(countryCode).each(function(){
addressHeadline = $(this).attr("addressHeadline");
addressAdr = $(this).attr("addressAdr");
addressPhone = $(this).attr("addressPhone");
addressFax = $(this).attr("addressFax");
addressEmail = $(this).attr("addressEmail");
addressUrl = $(this).attr("addressUrl");
vcardPATH = $(this).attr("vcardPATH");
latitude = $(this).attr("latitude");
longitude = $(this).attr("longitude");
});
}
});
// Create marker icon
var blueIcon = {
url: "http://www.pferd.com/images/pferd_zeiger_schatten.png",
size: new google.maps.Size(38,36)
};
/* Start config variables - please customize location of image ordner and translations of button texts */
var buttons = {
'vcard': 'VCard speichern'
};
/* End config variables */
function load() {
var point = new google.maps.LatLng(parseFloat(latitude),parseFloat(longitude));
var mapOptions = {
zoom: 9,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("offices-map"), mapOptions);
var marker = new google.maps.Marker({
position: point,
icon: blueIcon
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
var OfficeInfobox2 = new OfficeInfobox({
map: map
});
OfficeInfobox2.setMap(map);
});
}
function OfficeInfobox(content) {
this.content_ = content;
this.width = 300;
this.height = 200;
this.left = 109;
this.top = 40;
this.div;
}
OfficeInfobox.prototype = new google.maps.OverlayView;
OfficeInfobox.prototype.onAdd = function() {
var div = document.createElement("div");
div.id = "detailLayer";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.left = this.left +"px";
div.style.top = this.top +"px";
div.style.position = "absolute";
var html = '<div class="officeLayer">' +
'<div class="h2Outer">' +
'<div class="headline">' + addressHeadline + '</div>' +
'<div class="icClose"><a href="javascript:void(0);" id="closeImg"><img src="/images/ic_close.gif" /></a></div>' +
'<div class="clear2"> </div>' +
'</div>' +
'<div class="officeLayerContent heightAndScroll">' +
'<div class="addressBox">' + addressAdr + '</div>' +
'<div class="addressBox">' +
'<span class="addressLeft">Tel:</span> <a href="phone:' + addressPhone + '">' + addressPhone + '</a><br />' +
'<span class="addressLeft">Fax:</span> ' + addressFax + '<br />' +
'<span class="addressLeft link">E-Mail:</span> <a href="mailto:' + addressEmail + '" class="weiterlink">' + addressEmail + '</a><div class="clearleft"> </div>' +
'<span class="addressLeft link">URL:</span> <a href="' + addressUrl + '" target="_blank" class="weiterlink">' + addressUrl + '</a>' +
'<div class="clearleft"> </div>' +'</div>' +
'</div>' +
'<div class="officeLayerContent">' +
'<div class="addressBox boxMarginTop">' +
'<span class="addressLeft"> </span> ' +
'<span class="addressLeft2"><a href="' + vcardPATH + '" class="vcardlink">' + buttons.vcard + '</a></span>' +
'<div class="clearleft"> </div>' +
'</div>' +
'</div>' +
'</div>';
div.innerHTML = html;
// #####################################
// Ich denke hier könnte ein Problem sein
// #####################################
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
var closeImg = document.getElementById("closeImg");
function removeInfoBox(ib, m) {
return function() {
google.maps.event.trigger(ib, "closeclick");
m.removeOverlay(ib);
load();
};
}
google.maps.event.addListener(closeImg, 'click', function(){
google.maps.event.trigger(this, "closeclick");
map.removeOverlay(this);
load();
});
}
OfficeInfobox.prototype.onRemove = function() {
// #####################################
// Ich denke hier könnte ein Problem sein
// #####################################
this.div.parentNode.removeChild(this.div);
}
OfficeInfobox.prototype.draw = function(force) {
// #####################################
// Ich denke hier könnte ein Problem sein
// #####################################
var overlayProjection = this.getProjection();
var c1 = overlayProjection.fromLatLngToDivPixel(this.getBounds().getSouthWest());
var c2 = overlayProjection.fromLatLngToDivPixel(this.getBounds().getNorthEast());
this.div.style.width = this.width + "px";
this.div.style.height = this.height + "px";
this.div.style.left = (c1.x + this.left) +"px";
this.div.style.top = (c2.y + this.top) +"px";
}
-
Hallo Borewa,
... ein eigener Overlayer mit allen Kontaktdaten erscheinen, der wie die klassischen Fenster ein "X" in der rechte Ecke hat, welches beim Klick den Overlayer schließt, bzw löscht oder ausblendet.
ich nehme dafür ein InfoWindow
Gruß, Jürgen
-
Danke Jürgen,
das hatte ich am Anfang auch, aber leider bin ich gerade dabei den Code für die V3 fertig zu machen und da ist es ein eigen designter Overlayer und der muss vom Marketing genau so aussehen wie er aussieht.
-