Closed remcotolsma closed 1 year ago
Hey there,
So I thought I would take a stab at implementing a solution to style my infowindow and started with the infobox.js script.
This is what I was able to implement so far, but I have hit a dead end with a setMap error and wondering if you might have any idea what could be wrong here?
Here's the code.
buildMap: function( s ) {
var element = $( s );
var info = $.parseJSON( element.find( 'input[name="pgm-info"]' ).val() );
var canvas = element.find( '.canvas' ).get( 0 );
if ( canvas ) {
// Location
var location = new google.maps.LatLng( info.latitude, info.longitude );
// Map options
var mapOptions = $.extend( {
center: location
},
info.mapOptions
);
var map = new google.maps.Map( canvas, mapOptions );
// Marker options
var markerOptions = $.extend( {
position: location,
map: map
},
info.markerOptions
);
var marker = new google.maps.Marker( markerOptions );
var myInfoBox = document.createElement("div");
myInfoBox.style.cssText = "border: 1px solid black; margin-top: 8px; background: black; padding: 5px;";
myInfoBox.innerHTML = "This Place<br>Over Here<br>Canada";
var myOptions = {
content: myInfoBox
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
element.data( 'google-maps', map);
element.data( 'google-maps-marker', marker );
var newInfoBox = new InfoBox(myOptions);
google.maps.event.addListener( marker, 'click', function() {
newInfoBox.open( map, marker );
} );
// Trigger ready event
element.trigger( 'pronamic-google-maps-ready', map );
}
},
And there error I get is as follows > from http://maps.gstatic.com/maps-api-v3/api/js/21/6/main.js
Uncaught InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
Thanks for the help!
Hey,
Just thought I would follow up with my second attempt actually using the infoBubble.js
Here's the snippet I used for this.... and it worked just great!
var marker = new google.maps.Marker(markerOptions);
infoBubble = new InfoBubble({
content: '<div class="infoxboxtext">' + info.title + '</div>',
minWidth: 240,
minHeight: 100,
shadowStyle: 1,
padding: 10,
tabPadding: 12,
backgroundColor: 'black',
borderRadius: 3,
arrowSize: 10,
borderWidth: 0,
borderColor: '#AB2424',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 30,
backgroundClassName: 'infoxbox',
tabClassName: 'tabClass',
activeTabClassName: 'activeTabClass',
arrowStyle: 0
});
google.maps.event.addListener(marker, "click", function() {
infoBubble.open(map, marker);
});
Hello,
Can you give me some instructions on how to implement this? I think I am doing something wrong, because nothing changes.
Kind regards,
Thomas
For now, we have decided to no longer maintain and develop the "Pronamic Google Maps" plugin. Therefore, we will close this issue and archive this repository.
http://stackoverflow.com/questions/5634991/styling-google-maps-infowindow http://stackoverflow.com/questions/7616666/google-maps-api-v3-custom-styles-for-infowindow