Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
avatar
Admin
Messages : 201
Date d'inscription : 15/05/2017
Age : 30
Localisation : clairemont ferrand
Voir le profil de l'utilisateurhttp://irisbleu.forumactif.com

Reve de Gris lol

le Mar 7 Nov - 3:42
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmkewM2zLbF0xgRzVmp30ySjKR1rv3lmQ&extension=.js"></script>
<script src="https://cdn.mapkit.io/v1/infobox.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://cdn.mapkit.io/v1/infobox.css" rel="stylesheet" >

<script>
google.maps.event.addDomListener(window, 'load', init);
var map, markersArray = [];

function bindInfoWindow(marker, map, location) {
google.maps.event.addListener(marker, 'click', function() {
function close(location) {
location.ib.close();
location.infoWindowVisible = false;
location.ib = null;
}

if (location.infoWindowVisible === true) {
close(location);
} else {
markersArray.forEach(function(loc, index){
if (loc.ib && loc.ib !== null) {
close(loc);
}
});

var boxText = document.createElement('div');
boxText.style.cssText = 'background: #fff;';
boxText.classList.add('md-whiteframe-2dp');

function buildPieces(location, el, part, icon) {
if (location[part] === '') {
return '';
} else if (location.iw[part]) {
switch(el){
case 'photo':
if (location.photo){
return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>';
} else {
return '';
}
break;
case 'iw-toolbar':
return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>';
break;
case 'div':
switch(part){
case 'email':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="mailto:' + location.email + '" target="_blank">' + location.email + '</a></span></div>';
break;
case 'web':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="' + location.web + '" target="_blank">' + location.web_formatted + '</a></span></div>';
break;
case 'desc':
return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>';
break;
default:
return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location[part] + '</span></div>';
break;
}
break;
case 'open_hours':
var items = '';
if (location.open_hours.length > 0){
for (var i = 0; i < location.open_hours.length; ++i) {
if (i !== 0){
items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours +'</strong></li>';
}
var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>' + location.open_hours[0].day + '</strong><strong>' + location.open_hours[0].hours +'</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>';
}
return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>';
} else {
return '';
}
break;
}
} else {
return '';
}
}

boxText.innerHTML =
buildPieces(location, 'photo', 'photo', '') +
buildPieces(location, 'iw-toolbar', 'title', '') +
buildPieces(location, 'div', 'address', 'location_on') +
buildPieces(location, 'div', 'web', 'public') +
buildPieces(location, 'div', 'email', 'email') +
buildPieces(location, 'div', 'tel', 'phone') +
buildPieces(location, 'div', 'int_tel', 'phone') +
buildPieces(location, 'open_hours', 'open_hours', 'access_time') +
buildPieces(location, 'div', 'desc', 'keyboard_arrow_down');

var myOptions = {
alignBottom: true,
content: boxText,
disableAutoPan: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, -40),
zIndex: null,
boxStyle: {
opacity: 1,
width: '280px'
},
closeBoxMargin: '0px 0px 0px 0px',
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: 'floatPane',
enableEventPropagation: false
};

location.ib = new InfoBox(myOptions);
location.ib.open(map, marker);
location.infoWindowVisible = true;
}
});
}

function init() {
var mapOptions = {
center: new google.maps.LatLng(43.65396309186831,4.268645193359362),
zoom: 5,
gestureHandling: 'auto',
fullscreenControl: true,
zoomControl: true,
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: false,
scrollwheel: true,
streetViewControl: false,
draggable : false,
clickableIcons: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.HYBRID,
}
var mapElement = document.getElementById('mapkit-3102');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
{"title":"Saint-Hippolyte-du-Fort","address":"30170 Saint-Hippolyte-du-Fort, Francja","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":43.965294,"lng":3.8577099999999973,"vicinity":"Saint-Hippolyte-du-Fort","open_hours":"","marker":{"url":"https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png","scaledSize":{"width":25,"height":42,"f":"px","b":"px"},"origin":{"x":0,"y":0},"anchor":{"x":12,"y":42}},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}}
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon: locations[i].marker,
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map,
title: locations[i].title,
address: locations[i].address,
desc: locations[i].desc,
tel: locations[i].tel,
int_tel: locations[i].int_tel,
vicinity: locations[i].vicinity,
open: locations[i].open,
open_hours: locations[i].open_hours,
photo: locations[i].photo,
time: locations[i].time,
email: locations[i].email,
web: locations[i].web,
iw: locations[i].iw
});
markersArray.push(marker);

if (locations[i].iw.enable === true){
bindInfoWindow(marker, map, locations[i]);
}
}
}
</script>
<style>
#mapkit-3102 {
height:4000px;
width:6000px;
}
</style>

<div id='mapkit-3102'></div>
avatar
Admin
Messages : 201
Date d'inscription : 15/05/2017
Age : 30
Localisation : clairemont ferrand
Voir le profil de l'utilisateurhttp://irisbleu.forumactif.com

Re: Reve de Gris lol

le Mar 7 Nov - 3:44
tiens l adresse

http://js.do/code/178599

j adooore travailer la nuit pour laura henry
Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum