Incorporer Personnalisé plein écran sur la Carte de Google dans la page web

Je veux savoir comment intégrer un plein écran google map pour une page web (en arrière plan). Je voudrais cette carte pour être personnalisé avec pas de contrôles par défaut que vous souhaitez utiliser dans l'ordinaire de google maps de l'interface en ligne (seulement être capable de faire défiler avec la souris). Voici un exemple de ce que je suis en train de réaliser:

http://www.ijb.ca/contact/

Toute réflexion serait génial. Je suis nouveau sur le codage.

lire sur l'api google maps. Vous pouvez facilement supprimer les contrôles de la carte. Aussi loin que de rendre un arrière-plan. Vous créer un div qui contient la carte et définir la div à 100% de la hauteur/largeur et position:absolute le contenu sur le dessus
Envisager d'utiliser MapBox, c'est vraiment cool de service pour l'intégration de cartes personnalisées
ijb.ca/contact est cassé...

OriginalL'auteur user3537256 | 2014-04-15

  1. 12

    C'est très simple, j'ai fait un exemple ici http://jsfiddle.net/paulalexandru/T2F5Z/ et j'ai aussi ajouté le code ci-dessous:

    CODE HTML

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

<div id="menu">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
</div>

    CODE CSS

    #map {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;    
}

#menu {
    position: absolute;
    top: 10px;
    left: 10px;
}

    CODE JAVASCRIPT

    jQuery(document).ready(function () {
    var map;

    var style = [
        {
        stylers: [
            { saturation: "-100" },
            { lightness: "20" }
        ]
        },{
        featureType: "poi",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "transit",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "road",
        stylers: [
            { lightness: "50" },
            { visibility: "on" }
        ]
        },{
        featureType: "landscape",
        stylers: [
            { lightness: "50" }
        ]
        }
    ]

    var options = {
        zoom: 7,
        center:  new google.maps.LatLng(45.50867, -73.553992),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });

});

    Remarque: Pour supprimer les commandes dont vous avez besoin pour utiliser disableDefaultUI: true(voir https://developers.google.com/maps/documentation/javascript/examples/control-disableUI), faire de la couleur en noir et blanc, vous devez définir le type de carte, pour faire la carte en plein écran, vous devez définir la largeur et la hauteur de 100%, et n'oubliez pas la position absolue comme vous le voyez dans le css.

    paulalexandru: j'ai essayé en utilisant l'exemple ci-dessus. J'ai placé chaque morceau dans les zones correctes, et rien n'a eu lieu. Ma page est vide sans carte....qu'ai-je fait de mal? dois-je activer une clé API quelque part (j'ai essayé de le faire hier)...Désolé d'avance pour mon naïf de codage des questions...aussi, je suis en utilisant ce qui semble être le HTML 5 par wordpress Patti thème.....merci
    plus tard: j'ai fait ce que vous avez dit, mais ma page s'affiche avec rien (tout blanc)....ce qui est différent de ce qui a montré avant....alors peut-être une sorte de progrès...juste pour être clair, ce que j'ai fait: 1) insérée le codage de chaque catégorie ci-dessus (HTML, CSS, JS) dans les emplacements respectifs dans wordpress...j'ai remplacé le tout en HTML avec votre nouveau répondu lien ci-dessus. je suis actuellement à l'hébergement sur un temp de site.... visitez: jasonrichardadams.com vous pouvez voir ce que je veux dire avec le contact "option 2", "option de contact 3"..rien ne s'affiche. merci encore pour votre aide
    va faire. cela a été très utile. je ne comprends pas pourquoi le code devrait être salissant. mais je crois que je comprends ce que tu veux dire avec le codage en double. je imputé tout, de la afficher le code source dans mon wordpress éditeur de texte...qui est aussi dans les boîtes séparées pour les CSS et JS dans les options du thème
    stackoverflow.com/help/someone-answers
    vote? J'ai déjà voté.

    OriginalL'auteur paulalexandru

  2. 2

    Il fonctionne, mais bien sûr, vous devez ajouter tous les scripts:

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>     
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    OriginalL'auteur Kristof Van Cauwenbergh

  3. 0

    Voici le Code Javascript Personnalisé pour Carte

    <script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(40.578466,-73.840963),
                    scrollwheel: false, 
                    disableDefaultUI: true,

                    styles: [{stylers:[{hue:'#2c3e50'},{saturation:250}]},{featureType:'road',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);

                 var marker = new google.maps.Marker({
                            position: map.getCenter(),
                            map: map,
                            title: 'Click to zoom'
                            });
            }
  </script>

    Placer en bas de la page, puis ajouter un div pour le Corps HTML 

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

    Et le css de la Div est

    #map{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:absolute;
}

    Maintenant Créer toute div dans votre Balisage HTML avec n'importe quel nom de classe ou Id nom et de lui donner une position où vous souhaitez placer avec un peu de css et si vous voulez relooker votre carte, utiliser cet outil . il est assez utile

    http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

    OriginalL'auteur Harman Preet