[RÉSOLU] Ajouter google map

« Page précédente
0

Comment ajouter une google map en html et javascript sur un site web

RÉSOLU
Posté par Michaël
Posée le 4 mai 2015 15 h 21 min
56 vues
    0

    <script src= »https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&key=AIzaSyA3I0E8mhsm4K5Zsv27qiovQmLM017mmyA »></script>

    <script type= »text/javascript » src= »/js/infobubble.js »></script>

    <script>

    function initialize() {

    stylers: [

              { hue:  »#00d4ff » },

              { saturation: 60 },

              { lightness: -20 },

              { gamma: 1.51 }

            ]

    var myLatlng = new google.maps.LatLng(45.8849828,-72.4888999);

    var mapProp = {

        center:new google.maps.LatLng(45.8849828,-72.4888999),

        zoom:16,

        mapTypeId:google.maps.MapTypeId.ROADMAP,

        styles: [{ »stylers »:[{ »saturation »:-35},{ »gamma »:1.67},{ »hue »: »#00ccff »}]},{

    featureType: ’landscape’,

    elementType: ’all’,

    stylers: [

    { hue: ’#f5fbfd’ },

    { saturation: 20 },

    { lightness: 79 },

    { visibility: ’on’ }

    ]

    }]

      };

    var map= new google.maps.Map(document.getElementById( »googleMap »),mapProp);

    var marker = new google.maps.Marker({

          position: myLatlng,

          map: map,

          title: ’elefen’,

        icon: »/images/customMapMarker.png »,

      });

        var data =  » »;

        data = data +  »<div style=’text-align:center’ class=’infoBulleMap’> »;

        data = data +  »<img src=’/images/logo-elefen.png’ /> »;

        data = data +  »<div style=’text-align:center;font-size:16px;font-weight: lighter;’>115, Hériot</br>Drummondville (Québec) J5V 1J5</div></br> »;

        

        data = data +  »</div> »;

           infowindow = new InfoBubble({

          map: map,

          content: data,

         

          backgroundColor: ’#eafbfb’,

          borderRadius: 0,

          arrowSize: 10,

          borderWidth: 1,

          padding: ’20px’,

          borderColor: ’#eafbfb’,

          hideCloseButton: true,

       

        });

       

        google.maps.event.addListener(marker, ’click’, function() {

          infowindow.open(map,marker);

        });

        infowindow.open(map, marker);

    }

    google.maps.event.addDomListener(window, ’load’, initialize);

    </script>

    <div id= »googleMap » class= »googleMapSearch »></div>

    Posté par Michaël
    Répondue le 4 mai 2015 15 h 22 min
      « Page précédente