Ich habe versucht, mein Google Maps zu formatieren InfoWindow
, aber die Dokumentation zu diesem Thema ist sehr begrenzt. Wie stylst du ein InfoWindow
?
quelle
Ich habe versucht, mein Google Maps zu formatieren InfoWindow
, aber die Dokumentation zu diesem Thema ist sehr begrenzt. Wie stylst du ein InfoWindow
?
Google hat dazu einen Code geschrieben. Hier einige Beispiele: Beispiel mit InfoBubble , gestalteten Markierungen und benutzerdefiniertem Infofenster (mit OverlayView).
Der Code in den obigen Links verwendet unterschiedliche Routen, um ähnliche Ergebnisse zu erzielen. Das Wesentliche dabei ist, dass es nicht einfach ist, InfoWindows direkt zu formatieren, und es möglicherweise einfacher ist, die zusätzliche InfoBubble-Klasse anstelle von InfoWindow zu verwenden oder GOverlay zu überschreiben. Eine andere Möglichkeit wäre, die Elemente des InfoWindow mit Javascript (oder jQuery) zu ändern, wie später von ATOzTOA vorgeschlagen.
Möglicherweise ist das einfachste dieser Beispiele die Verwendung von InfoBubble anstelle von InfoWindow. InfoBubble ist verfügbar, indem Sie diese Datei importieren (die Sie selbst hosten sollten):http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js
InfoBubbles Github-Projektseite .
InfoBubble ist im Vergleich zu InfoWindow sehr stilvoll:
infoBubble = new InfoBubble({
map: map,
content: '<div class="mylabel">The label</div>',
position: new google.maps.LatLng(-32.0, 149.0),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'transparent',
arrowStyle: 2
});
infoBubble.open();
Sie können es auch mit einer bestimmten Karte und Markierung aufrufen, um es zu öffnen:
infoBubble.open(map, marker);
Als weiteres Beispiel erweitert das Beispiel "Benutzerdefiniertes Infofenster" die GOverlay-Klasse aus der Google Maps-API und verwendet diese als Grundlage für die Erstellung eines flexibleren Infofensters. Zuerst wird die Klasse erstellt:
/* An InfoBox is like an info window, but it displays
* under the marker, opens quicker, and has flexible styling.
* @param {GLatLng} latlng Point to place bar at
* @param {Map} map The map on which to display this InfoBox.
* @param {Object} opts Passes configuration options - content,
* offsetVertical, offsetHorizontal, className, height, width
*/
function InfoBox(opts) {
google.maps.OverlayView.call(this);
this.latlng_ = opts.latlng;
this.map_ = opts.map;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 0;
this.height_ = 165;
this.width_ = 266;
var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function() {
return me.panMap.apply(me);
});
// Once the properties of this OverlayView are initialized, set its map so
// that we can display it. This will trigger calls to panes_changed and
// draw.
this.setMap(this.map_);
}
Danach wird GOverlay überschrieben:
InfoBox.prototype = new google.maps.OverlayView();
Sie sollten dann die Methoden außer Kraft setzen Sie brauchen: createElement
, draw
, remove
und panMap
. Es wird ziemlich kompliziert, aber theoretisch zeichnen Sie jetzt selbst ein Div auf der Karte, anstatt ein normales Infofenster zu verwenden.
Sie können das gesamte InfoWindow nur mit jquery ändern ...
Hier fungiert das <p> -Element als Hook für das eigentliche InfoWindow. Sobald das Domready ausgelöst wird, wird das Element aktiv und über Javascript / JQuery zugänglich
$('#hook').parent().parent().parent().parent()
.Der folgende Code legt nur einen 2-Pixel-Rand um das InfoWindow fest.
Sie können beispielsweise eine neue CSS-Klasse festlegen oder einfach ein neues Element hinzufügen.
Spielen Sie mit den Elementen, um das zu bekommen, was Sie brauchen ...
quelle
// CSS in Stylesheet einfügen
quelle
Ich habe den folgenden Code verwendet, um externes CSS anzuwenden:
quelle
Verwenden Sie das InfoBox- Plugin aus der Google Maps Utility Library. Dies erleichtert das Stylen / Verwalten von Karten-Popups erheblich.
Beachten Sie, dass Sie sicherstellen müssen, dass es nach der Google Maps-API geladen wird:
quelle
Ich habe Design Google Map Infowindow mit Bild & einigen Inhalten wie unten.
quelle
Sie können auch eine CSS-Klasse verwenden.
Schönen Tag!
quelle