Friday, February 8, 2013

Ajouter un symbol sur une google map

Là je met un petit code qui permet d'ajouter une map google
avec une ptite icone, c'est pas gde choZ mais ça peut être util

C'est simple:

<!-- added July,06th 2013-->
Eh! faut pas oublier ça
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!-- -->
1- laisser un div pour la map google dans notre exemple nous l'appellerons map_canvas
2- Creer un fichier javascript
contenant:


        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(longitude,latitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

(dans ce cas , et puis changez les longitudes et latitudes comme vous voulez)

3- Déclarer un objet image (notre icone)
var imagePgt = 'images/peugeot.png';

4-Ajouter l'icone à la map et dans l'emplacement specifique:

var marker = new google.maps.Marker({
            position: new google.maps.LatLng(longitude, latitude),
            map: map,
            icon: imagePgt
        });

c'est presque fini : voila un exemple entier:

 function initMap() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(33.861293,10.085449),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

        var imagePgt = 'images/peugeot.png';
        
    var pgtMarker1 = new google.maps.Marker({
            position: new google.maps.LatLng(36.733063, 10.320570),
            map: map,
            icon: imagePgt
        });
}
5- appel à la méthode initMap() apres le chargement du doc en cas d'utilisation de jquery, ou bien appel direct à la fonction apres la declaration du div dans le html
 ( <script> initMap(); </script>)

Friday, February 1, 2013

Internet explorer and column count css property

this week we faced the non support of column-count property problem by the microsoft ie,
finally we ve found a an efficient solution based on a jquery plugin "columnizer plugin "


this is a typical css code for columnized div


.my-column
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
 column-count:3;
}
as we said this style is not interpreted by ie  
then


1- we can download the plugin  columnizer

2- we import the appropiriate js file
<script src="????/js/jquery.columnizer.js" type="text/javascript"></script>

3- Now we add a short code to let only Internet explorer invoke the plugin

<script>
$(function(){
if($.browser.msie){
$('.my-column').columnize({
columns:3
});
}
});
</script>
(JQuery is needed in all cases)

That's all thanks to Adam Wulf  the author of the plugin