Display pin overlay and link map

This commit is contained in:
Brian Miyaji
2018-08-22 01:22:35 +10:00
parent 4b8dbaec49
commit f38f413041
3 changed files with 24 additions and 7 deletions

View File

@@ -525,10 +525,24 @@
}
/* Google Maps */
.sp-google-map-container {
position: relative;
}
.sp-google-map {
width: 100%;
height: 320px;
}
.sp-google-map-link {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/maps/pin.png) no-repeat center center;
background-size: 26px 44px;
}
.sp-google-map img {
max-width: none !important;
}

BIN
assets/images/maps/pin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@@ -25,12 +25,15 @@ if ( 'satellite' !== $maptype ) $maptype = 'roadmap';
if ( $latitude != null && $longitude != null ):
?>
<iframe
class="sp-google-map<?php if ( is_tax( 'sp_venue' ) ): ?> sp-venue-map<?php endif; ?>"
width="600"
height="320"
frameborder="0" style="border:0"
src="//tboy.co/maps_embed?q=<?php echo $address; ?>&amp;center=<?php echo $latitude; ?>,<?php echo $longitude; ?>&amp;zoom=<?php echo $zoom; ?>&amp;maptype=<?php echo $maptype; ?>" allowfullscreen>
</iframe>
<div class="sp-google-map-container">
<iframe
class="sp-google-map<?php if ( is_tax( 'sp_venue' ) ): ?> sp-venue-map<?php endif; ?>"
width="600"
height="320"
frameborder="0" style="border:0"
src="//tboy.co/maps_embed?q=<?php echo $address; ?>&amp;center=<?php echo $latitude; ?>,<?php echo $longitude; ?>&amp;zoom=<?php echo $zoom; ?>&amp;maptype=<?php echo $maptype; ?>" allowfullscreen>
</iframe>
<a href="https://www.google.com.au/maps/place/<?php echo $address; ?>/@<?php echo $latitude; ?>,<?php echo $longitude; ?>,<?php echo $zoom; ?>z" target="_blank" class="sp-google-map-link"></a>
</div>
<?php
endif;