Sélectionner une page


As tu un Page de contact ou Zone de contact sur votre site Web d’une page?

Chaque fois que vous publiez votre adresse, c’est toujours une Bonne idée d’ajouter une carte aussi pour améliorer l’expérience utilisateur et faire connaître votre emplacement ou votre adresse professionnelle.

Aujourd’hui, je veux vous montrer comment n’en ajouter qu’un carte google personnalisée pour votre site Web avec un marquage personnalisé et Fenêtre d’informations Cela s’ouvrira lorsque l’utilisateur cliquera sur l’étiquette indiquant votre adresse. Tout ce dont vous avez besoin est un peu de temps et des compétences de base en HTML, CSS et JavaScript.

démo Telecharger des fichiers

Alors allons-y.

Clé API Google Maps

Récemment, Google a apporté des modifications aux directives de l’API. Donc, si vous avez besoin des résultats de ce didacticiel pour votre propre domaine, vous devrez créer votre propre clé API Google.

Si vous suivez ce didacticiel à des fins éducatives uniquement, vous pouvez ignorer cette étape. Notre clé API incluse dans les codes source devrait fonctionner correctement sur votre ordinateur.

Visite pour créer une clé API cette page et cliquez sur Obtenez une clé Bouton. L’ensemble du processus d’obtention de la clé API ne prend qu’une minute ou deux.

Tout est prêt? Passons au modèle HTML.

Modèle HTML

Comme toujours, nous allons commencer par les bases Modèle HTML nous allons bâtir sur cela.

Le modèle est assez simple:

  • En faisant head, nous ajoutons une feuille de style bootstrap, Montserrat à partir de polices google et localement custom.css Feuille de style. Dans ce fichier, nous allons faire notre style de base pour cette démo.
  • Les textes factices sont uniquement à des fins de démonstration, il n’y a aucune autre raison de les avoir là-bas
  • Ce qui est important, c’est la présence de vides div id="map". Ceci est le conteneur de notre carte Google
  • avant le <body> jour de fermeture, nous incluons jQuery, Scripts d’amorçage, scripts Google Maps et local custom.js Déposer. Nous lancerons Google Maps dans ce fichier.
  • Si vous disposez de votre propre clé API Google Maps de l’étape précédente, remplacez-la dans le code source: key=YOUR_KEY
  • Pour Bootstrap, jQuery et Font Awesome, j’ai utilisé leurs versions CDN. Si vous testez les scripts sans connexion Internet, N’oubliez pas d’inclure vos versions locales
<html>
    <head>
        <title>Bootstrap & Google maps Tutorial by Bootstrapious.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
        <link href="custom.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <div class="container">

            <div class="row">

                <div class="col-lg-8 col-lg-offset-2">

                    <h1>Google maps & Bootstrap tutorial from <a href="http://bootstrapious.com">Bootstrapious.com</a></h1>

                    <p class="lead">This is a demo for our tutorial showing you how to add a custom styled Google maps into a Bootstrap page.</p>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                    
                </div>

            </div> 

        </div> 

        <div id="map"></div>

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>
        <script src="custom.js"></script>
    </body>
</html>

C’est tout le HTML dont nous aurons besoin aujourd’hui. Passons à la partie JavaScript.

JavaScript – Initialisation de Google Maps

Les plus Initialisation de base de Google Maps de notre côté est montré dans le bloc de code suivant.

Permettez-moi de le traduire un peu en anglais:

  • Lorsque la page est chargée, le initMap() La fonction est appelée – cela est fait par Google Maps. addDomListener() fonction
  • dans ce rôle nous avons Déclarer l’emplacement Nous voulons centrer notre carte – le premier chiffre est la latitude, le second est la longitude
  • puis nous obtenons l’élément mapCanvas. C’est la nôtre <div id="map"> à partir du code HTML ci-dessus.
  • nous définissons certains Options de carte de base (Niveau de zoom, type de carte)
  • et nous en créons de nouveaux Objet Google Maps et passez notre configuration à new google.maps.Map(mapCanvas, mapOptions);
  • et Google Map sera rendu sur notre site.
$(function () {

    function initMap() {

        var location = new google.maps.LatLng(50.0875726, 14.4189987);

        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: location,
            zoom: 16,
            panControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);

    }

    google.maps.event.addDomListener(window, 'load', initMap);
});

Google Map tiré de ce code ressemblera assez de base mais c’est parfait déjà utilisable. Il sera centré sur la place de la vieille ville de Prague et ressemblera à ceci.

Ajoutez un marqueur avec une icône personnalisée et une fenêtre contextuelle qui apparaît lorsque vous cliquez sur

Nous avons rendu la carte, le moment est venu Ajouter un marqueur avec une fenêtre contextuelle à notre carte maintenant.

Nous le faisons comme ceci:

  • d’abord nous allons Définissez le chemin du fichier à notre symbole de marqueur dans le markerImage Variable.
  • ensuite nous ajoutez-le à la carte par téléphone new google.maps.Marker;; Nous lui donnerons un emplacement, un objet cartographique et le chemin vers le symbole
  • puis nous définissons dans le contentString Variable le Contenu de la fenêtre d’informations Nous voulons être affichés après que l’utilisateur clique sur la marque
  • Maintenant nous Créer la fenêtre d’informations Objet en appelant new google.maps.InfoWindow
  • La dernière chose que nous devons faire est de fermer Lier la fenêtre d’information avec le marquage et ajoutez une fonctionnalité qui attend qu’elle apparaisse seulement après que l’utilisateur clique sur le marqueur – marker.addListener
$(function () {

    function initMap() {

        var location = new google.maps.LatLng(50.0875726, 14.4189987);

        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: location,
            zoom: 16,
            panControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);

        var markerImage="marker.png";

        var marker = new google.maps.Marker({
            position: location,
            map: map,
            icon: markerImage
        });

        var contentString = '<div class="info-window">' +
                '<h3>Info Window Content</h3>' +
                '<div class="info-content">' +
                '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
                '</div>' +
                '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 400
        });

        marker.addListener('click', function () {
            infowindow.open(map, marker);
        });


    }

    google.maps.event.addDomListener(window, 'load', initMap);
});

Voir le résultat de ces étapes dans l’image ci-dessous.

Styliser la carte Google

À ce stade, je veux juste vous montrer aujourd’hui comment concevoir la carte Google. Pour donner à la carte un aspect en niveaux de gris, ajoutons l’extrait de code suivant à notre code initMap Fonction.

var styles = [{"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]}, {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]}, {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]}, {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}];

map.set('styles', styles);

Une excellente ressource pour les thèmes google maps est Envoyer des cartes Site Internet.

Conclusion

Cela devrait être tout pour aujourd’hui. J’espère que tu t’es amusé Ce Tutoriel Bootstrap et appris quelques choses intéressantes dans le processus!

Si vous avez aimé le tutoriel, N’oubliez pas de partager avec vos amis!

Pour améliorer encore plus vos compétences en codage, consultez le mien Tutoriel sur le formulaire de contact ou au Tutoriel Bootstrap Carousel.



Source link

Recent Posts