Skip to content

Instantly share code, notes, and snippets.

@charleslouis

charleslouis/_GoogleMap.scss

Created April 15, 2013 10:15
Show Gist options
  • Save charleslouis/5387139 to your computer and use it in GitHub Desktop.
Save charleslouis/5387139 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_GoogleMap.scss
//Map and location
//layout
.location-wrapper,
.contact-wrapper {
.block-title {
margin-bottom: 2em;
}
}
.location-wrapper {
padding-bottom: 3em;
}
.map-wrapper {
width: 66%;
float: left;
margin-top: 0.8em;
}
.map {
position: relative;
height: 300px;
width: 100%;
background: $mapImage no-repeat;
background-size: cover;
h1 {
position: absolute;
background-color: white;
opacity: 0.7;
line-height: 2em;
width: 100%;
text-align: center;
margin: 30% 0;
}
}
.location-info-wrapper{
width: 33.33%;
padding-left: $gridGutterWidth;
float: left;
h1,
h1 a, p,
p a,
.generalIcon {
color: $gray;
}
}
.access-google {
float: right;
line-height:2em;
}
.phone {
margin-top: 1.5em;
// margin-bottom: 0;
// line-height: 1.5em
}
.mail {
margin-bottom: 1.5em;
text-decoration: underline;
}
.generalIcon-phone:before {
content: $phone;
}
.generalIcon-mail:before {
content: $mail;
}
.generalIcon-metro,
.generalIcon-tramway,
.generalIcon-parking {
float: left;
width: 1.25em;
height: 1.25em;
margin: 0 0.5em 0 0.45em;
line-height: 1.25em;
background-image: $transportation;
background-repeat: no-repeat;
background-size: cover;
}
.generalIcon-metro {
background-position: 0 -20px;
}
.generalIcon-tramway {
background-position: 0 -40px;
}
.generalIcon-parking {
background-position: 0 -60px;
}
Raw
gooleMap.html
<section>
<header>
<hgroup>
<h1>pour nous trouver<?php the_sub_field('titre'); ?></h1>
</hgroup>
</header>
<section class="map-wrapper">
<a id="mapWrapperLink" href="https://maps.google.fr/maps?q=6+Rue+de+la+Poste,+Roubaix&hl=fr&ll=50.68909,3.174384&spn=0.012221,0.033023&sll=50.689185,3.175001&sspn=0.003055,0.008256&gl=fr&hnear=6+Rue+de+la+Poste,+59100+Roubaix,+Nord,+Nord-Pas-de-Calais&t=m&z=16&iwloc=lyrftr:m,0x47c328ec44b6ac19:0x23a816220741612b,50.691673,3.174491" target="_blank">
<div id="map" class="map">
<h1>
Cliquez ici pour lancer Google map
</h1>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</div>
</a>
<a id="gooleMapLink" class="access-google" href="https://maps.google.fr/maps?q=6+Rue+de+la+Poste,+Roubaix&hl=fr&ll=50.68909,3.174384&spn=0.012221,0.033023&sll=50.689185,3.175001&sspn=0.003055,0.008256&gl=fr&hnear=6+Rue+de+la+Poste,+59100+Roubaix,+Nord,+Nord-Pas-de-Calais&t=m&z=16&iwloc=lyrftr:m,0x47c328ec44b6ac19:0x23a816220741612b,50.691673,3.174491" target="_blank">Cliquez ici pour afficher dans Google map</a>
</section>
<section class="location-info-wrapper">
<div class="">
<h1 class="contact_title"><a id="lienIWS">Jaicost</a></h1 clas="baseline">
<p>6, rue de la Poste<br>59100 Roubaix - FRANCE</p>
<p class="phone">
<i class="generalIcon generalIcon-phone" aria-hidden="true"></i>
<a id="clickPhone" href="tel:+33320269625"><span>+33 (0)3 20 26 96 25</span></a>
</p>
<p class="mail"><i class="generalIcon generalIcon-mail" aria-hidden="true"></i>
<a href="mailto:[email protected]" id="mailto">[email protected]</a></a>
</p>
<div class="transportations">
<p class="metro">
<a id="MetroGrandPlaceLink"><i class="generalIcon generalIcon-metro" aria-hidden="true"></i><span>M°2 - Grand Place</span></a>
</p>
<p class="metro">
<a id="MetroGareLink"><i class="generalIcon generalIcon-metro" aria-hidden="true"></i><span>M°2 - Gare Jean-Lebas</span></a>
</p>
<p class="tramway">
<a id="TramwayLink"><i class="generalIcon generalIcon-tramway" aria-hidden="true"></i><span>Tramway - Eurotéléport</span></a>
</p>
<p class="tramway">
<a id="TramwayLink"><i class="generalIcon generalIcon-tramway" aria-hidden="true"></i><span>Tramway - Alfred Mongy</span></a>
</p>
<p class="parking">
<a id="ParkingLink"> <i class="generalIcon generalIcon-parking" aria-hidden="true"></i><span>Parking: rue de la Poste</span></a>
</p>
</div>
</div>
</section>
</section>
Raw
gooleMap.js
//GOOGLEMAP
function initialisationGMap($map){//include google map in the proper div
if (document.getElementById($map)){
if ($('html').hasClass('no-touch')){
$('#mapWrapperLink').removeAttr('href', '');
$('#clickPhone').removeAttr('href', '');
var centreCarte = new google.maps.LatLng(50.69100,3.174374),
p_adresse = new google.maps.LatLng(50.68901,3.174374),
p_metroGare = new google.maps.LatLng(50.69344,3.163977),
p_metroGrandPlace = new google.maps.LatLng(50.690368,3.168826),
p_metroEuroTel = new google.maps.LatLng(50.69167,3.174502),
p_tramEuroTel = new google.maps.LatLng(50.691089,3.179147),
p_tramAlfredMongy = new google.maps.LatLng(50.687889,3.175284),
p_park = new google.maps.LatLng(50.689185,3.1757000);
var i_sprite = imageFolder+"/location-coordonnees.png",
i_adresse = new google.maps.MarkerImage(i_sprite, new google.maps.Size(40, 40), new google.maps.Point(0, 0)),
i_metro = new google.maps.MarkerImage(i_sprite, new google.maps.Size(40, 40), new google.maps.Point(0, 40)),
i_tram = new google.maps.MarkerImage(i_sprite, new google.maps.Size(40, 40), new google.maps.Point(0, 80)),
i_park = new google.maps.MarkerImage(i_sprite, new google.maps.Size(40, 40), new google.maps.Point(0, 117));
var optionsCarte = {
zoom: 15,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maCarte = new google.maps.Map(document.getElementById($map), optionsCarte);
var park = new google.maps.Marker({
icon: i_park,
position: p_park,
map: maCarte
}),adresse = new google.maps.Marker({
icon: i_adresse,
position: p_adresse,
map: maCarte
}), metroGare = new google.maps.Marker({
icon: i_metro,
position: p_metroGare,
map: maCarte
}),metroGrandPlace = new google.maps.Marker({
icon: i_metro,
position: p_metroGrandPlace,
map: maCarte
}),metroEuroTel = new google.maps.Marker({
icon: i_metro,
position: p_metroEuroTel,
map: maCarte
}),tramEuroTel = new google.maps.Marker({
icon: i_tram,
position: p_tramEuroTel,
map: maCarte
}),tramAlfredMongy = new google.maps.Marker({
icon: i_tram,
position: p_tramAlfredMongy,
map: maCarte
});
} else {
// as we're on TOUCH we rather provide an image with a link to google map
$('#'+ $map).click(function() {//rebuilt the div ID > on click on the map div ID, open a new teb with the full map
window.open('https://maps.google.fr/maps?q=6+Rue+de+la+Poste+-+59100+Roubaix&oe=utf-8&client=firefox-a&hnear=6+Rue+de+la+Poste,+59100+Roubaix,+Nord,+Nord-Pas-de-Calais&gl=fr&t=m&z=14');
});
// we dont't need access via the text link
$('#gooleMapLink').remove();
}
}
}//end of initialisationGMap -google map-
initialisationGMap('map');//Google Map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment