Responsive CSS for Geo Mashup plugin (Global Map Info Window) WordPress

pjeaje comments:

That doesn't help me, at all. Where do i pu this css? does it replace ALL of my current css? What about the post thumbnail, can you cut out the display:none so that the thumbnail displays and format that.

pjeaje comments:

Yep, I know all that. I've been busting my nuts trying to make the location window work responsively. Hence why I'm here. Maybe there's a better way like
1. an ajax solution whereby the post details appear with some shortcode
2. a lightbox
3. dunno?

The window works well until the screen moves under 700px, then it goes horrible.

Dylan Kuhn comments:

I might be able to make better suggestions if I could look at the map - can you give us a URL?

pjeaje comments:

<blockquote>can you give us a URL?</blockquote>

Thanks, Have a look at the top of my post for my url.

Dylan Kuhn comments:

Sorry - got confused by wpquestions mishandling of that link. The easiest thing to try might be to turn the info windows off and use the full post tag beneath the map. In shortcodes that would look something like:


[geo_mashup_map name="main-map" map_content="global" marker_select_info_window="false"]
[geo_mashup_full_post for="main-map"]


Dylan Kuhn comments:

I think I can at least prototype a better solution using the javascript API - I'll be back.

pjeaje comments:

Thanks for that. I wasn't aware of the geo-mashup-full-post. That might work quite well. Otherwise I'd love to see what you can do with js.

Dylan Kuhn comments:

Here's a basic replacement for the info window. It uses the [[LINK href="https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Javascript-API"]]Geo Mashup javascript API[[/LINK]]. After installing the Geo Mashup Custom plugin as described there, I created two files in the geo-mashup-custom plugin folder.

map-style.css:

#map-modal {
position: absolute;
top: 45px;
left: 45px;
right: 45px;
bottom: 45px;
border: 1px #ccc solid;
background-color: white;
padding: 20px;
overflow: hidden;
}

a.close {
position: absolute;
top: 15px;
right: 15px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #999;
text-shadow: 0 1px 0 #fff;
}


custom-googlev3.js:

(function( $ ) {

var $modal;
var $close_link;

GeoMashup.getShowPostElement = function() {
if ( ! $modal ) {
return null;
}
return $modal.get( 0 );
}

GeoMashup.addAction( 'newMap', function( properties, map ) {
properties.marker_select_info_window = false;
$close_link = $( '' );
$modal = $( '<div id="map-modal"></div>' );
$( 'body' ).append( $modal );
} );

GeoMashup.addAction( 'fullPostLoad', function( objects, filter ) {
filter.content = '<a href="#map-modal" title="close" class="close">&times;</a>' +
GeoMashup.parentizeLinksMarkup( filter.content );
} );

GeoMashup.addAction( 'fullPostChanged', function() {
$modal.prepend( $close_link ).show();
} );

$( document ).ready( function() {
$( 'body' ).on( 'click', '.close', function() {
$modal.hide();
} );
} );


})( jQuery );


You could also add a full-post.php template to customize the content, including using and excerpt rather than complete post content if desired.

pjeaje comments:

Thanks I'll check it out after work.

pjeaje comments:

I downloaded, installed and activated the above plugin.

I added the 2 above files to the above plugin's folder

There's now no longer a pop up information window.

pjeaje comments:

"There's now no longer a pop up information window." when I click on a marker, (but it does center the marker which is nice!)

Dylan Kuhn comments:

Centering is one of the marker selection behaviors you can control in the settings or [[LINK href="https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Tag-Reference#map-options"]]map tag parameters[[/LINK]].

It looks like you still need to activate the Geo Mashup Custom plugin.

pjeaje comments:

I did activate it but it still didn't work

Dylan Kuhn comments:

I can't tell what might be going wrong without it active, but your full post setup will probably be less error prone and looks good!

pjeaje comments:

Ice reactivated it. I'd prefer an insitu pop up solution as the other way isn't seen when on a mobile phone when you tap in a second marker.

Dylan Kuhn comments:

Ah, the map-style.css is being used. Either rename that file temporarily, or add the CSS code above to it.

pjeaje comments:

Where do I add the CSS

Dylan Kuhn comments:

Looking better! You can add your own CSS in map-style.css as well.

And it looks like we need to hide the modal initially, so custom-googlev3.js would be:




(function( $ ) {



var $modal;

var $close_link;



GeoMashup.getShowPostElement = function() {

if ( ! $modal ) {

return null;

}

return $modal.get( 0 );

}



GeoMashup.addAction( 'newMap', function( properties, map ) {

properties.marker_select_info_window = false;

$close_link = $( '' );

$modal = $( '<div id="map-modal"></div>' );

$( 'body' ).append( $modal );

$modal.hide();

} );



GeoMashup.addAction( 'fullPostLoad', function( objects, filter ) {

filter.content = '<a href="#map-modal" title="close" class="close">&times;</a>' +

GeoMashup.parentizeLinksMarkup( filter.content );

} );



GeoMashup.addAction( 'fullPostChanged', function() {

$modal.prepend( $close_link ).show();

} );



$( document ).ready( function() {

$( 'body' ).on( 'click', '.close', function() {

$modal.hide();

} );

} );





})( jQuery );


pjeaje comments:

Still doesn't work

Dylan Kuhn comments:

Doesn't look like custom-googlev3.js has been updated. When it has you'll see the extra $modal.hide() in [[LINK href="http://www.secondchance.dating/wp-content/plugins/geo-mashup-custom/custom-googlev3.js?ver=4.1.2"]]http://www.secondchance.dating/wp-content/plugins/geo-mashup-custom/custom-googlev3.js?ver=4.1.2[[/LINK]]

pjeaje comments:

I copied and pasted your modifications into that file

Dylan Kuhn comments:

I'm not sure why your server isn't using the new version. Not sure what to suggest other than double-checking that the right file got updated.