Ask your WordPress questions! Pay money and get answers fast! (more info)

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

I need some css work for my Geo Mashup popup information window. I'm not having much luck getting the window size, font size, post thumbnail size and text size working so that it fits in mobile devices and tablets and without the scroll bars.

My page is [[LINK href="secondchance.dating"]]secondchance.dating[[/LINK]]

the page template is below...

<?php
/**
* @package GeoMashup
*/
// A potentially heavy-handed way to remove shortcode-like content
add_filter( 'the_excerpt', array( 'GeoMashupQuery', 'strip_brackets' ) );
?>

<div class="locationinfo post-location-info" style="width:90%;min-width:300px;">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<p>
<span style="float:left;padding-right:5pxXXX;display:none">
<?php if ( function_exists( 'has_post_thumbnail') and has_post_thumbnail() ) {the_post_thumbnail('medium', array( 'class' => 'wp-post-image alignleft' ) ); ?>
<?php } else { ?>
<?php }?>
</span>

<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
Are you a
<?php if(has_term('', 'age2')) {?>
<?php $terms = get_the_term_list( $post->ID, 'age2', ' ','' ) ; echo strip_tags($terms); ?> year old
<?php } else { ?>
<?php }?>
<?php if(has_term('', 'seeking')) {?>
<?php $terms = get_the_term_list( $post->ID, 'seeking', ' ','' ) ; echo strip_tags($terms); ?>
<?php } else { ?>
someone
<?php }?>
who was at
<?php the_title(); ?>
on
<?php the_time(get_option('date_format')); ?>
at about <?php the_time('g:ia'); ?>?

</a>
</p>

<p>Someone might be looking for a Second Chance with you. To find out more <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">Click Here &raquo;</a>.</p>

<?php endwhile; ?>

<?php else : ?>

<h2 class="center">Not Found</h2>

<p class="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

</div>


my css is...
/**
* Default map styles.
*
* Don't modify this file! It will be overwritten by upgrades.
*
* Instead, copy this file to map-style.css in your theme directory
* or Geo Mashup Custom plugin directory, if you have that
* installed. Those files take precedence over these default styles.
*/

/* Maps fill the frame, makes percentage height maps a bit easier */
html, body { height: 100%; overflow: hidden; margin: 0; }

/* Post date and tags/categories */
.meta { font-size:70%; }
.meta .blogdate { font-style: italic; }

/* Info window */
.locationinfo { font-size:60%; overflow:auto; width:99%; min-width:600px; height:150px; }
.user-location-info { font-size:50%; overflow:auto; width:99%; min-width:600px; height:90px; }
.comment-location-info { font-size:50%; overflow:auto; width:99%;min-width:600px; height:140px; }
.info-window-max { font-size:50%; overflow:auto; width:100%;min-width:600px; }
.locationinfo.post-location-info p a {font-size:15px;text-decoration:none;}
.locationinfo.post-location-info p {font-size:15px;text-decoration:none;}

/* Title link style */
.locationinfo h2 a, .info-window-max h2 a { text-decoration:none; margin:0; padding:0; }


/* Excerpt */
.storycontent { font-family: Verdana Sans-Serif; }

#geo-mashup.gm-map-1 .gm-style {width:600px;}


You can get the original template code and original css from the plugin. This map help...
[[LINK href="https://code.google.com/p/wordpress-geo-mashup/wiki/Documentation#Global_Mashup_Page"]]https://code.google.com/p/wordpress-geo-mashup/wiki/Documentation#Global_Mashup_Page[[/LINK]]





Answers (2)

2015-04-21

Romel Apuya answers:

add

.gm-map {
position: relative !important;
padding-bottom: 40% !important;
height: 0 !important;
overflow: hidden !important;
}
.gm-map iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}


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.

2015-04-21

Dylan Kuhn answers:

Your CSS should go in a file named map-style.css in your theme folder. I'm not the best mobile CSS wizard, but if you find better defaults for small screens I'm game to include them in the plugin.


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.