波尔图模板:谷歌地图没有出现

时间:2014-09-05 23:06:23

标签: javascript google-maps jsf

我正在使用 JSF 开发一个网站,并且我正在努力实现新的 PORTO模板,现在我正在联系我们页面,它有一张地图,当我执行时不会显示,我不知道为什么,我在JS中有点弱。 所以请帮帮我!!

.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="vendor/jquery.gmap.js"></script>

<script>
    /*
    Map Settings

        Find the Latitude and Longitude of your address:
            - http://universimmedia.pagesperso-orange.fr/geo/loc.htm
            - http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/

     */

    // Map Markers
    var mapMarkers = [ {
        address : "New York, NY 10017",
        html : "<strong>New York Office</strong><br/>New York, NY 10017",
        icon : {
            image : "img/pin.png",
            iconsize : [ 26, 46 ],
            iconanchor : [ 12, 46 ]
        },
        popup : true
    } ];

    // Map Initial Location
    var initLatitude = 40.75198;
    var initLongitude = -73.96978;

    // Map Extended Settings
    var mapSettings = {
        controls : {
            panControl : true,
            zoomControl : true,
            mapTypeControl : true,
            scaleControl : true,
            streetViewControl : true,
            overviewMapControl : true
        },
        scrollwheel : false,
        markers : mapMarkers,
        latitude : initLatitude,
        longitude : initLongitude,
        zoom : 16
    };

    var map = $("#googlemaps").gMap(mapSettings);

    // Map Center At
    var mapCenterAt = function(options, e) {
        e.preventDefault();
        $("#googlemaps").gMap("centerAt", options);
    }
</script>
</h:head>
<h:body>
<ui:composition template="/WEB-INF/Publique/template.xhtml">
    <ui:define name="title">Corporate Software : Nous Contactez </ui:define>
    <ui:define name="content">
        <div role="main" class="main">

            <section class="page-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li><a href="index">Acceuil</a></li>
                            <li class="active">Nous Contactez</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <h2>Nous Contactez</h2>
                    </div>
                </div>
            </div>
            </section>

            <!-- Google Maps -->
            <div id="googlemaps" class="google-map hidden-xs"></div>

            <div class="container">

                <div class="row">
                    <div class="col-md-6">

                        <div class="alert alert-success hidden" id="contactSuccess">
                            <strong>Succés!</strong> Nous avons reçus votre message.
                        </div>

                        <div class="alert alert-danger hidden" id="contactError">
                            <strong>Erreure!</strong> Une Erreure c'est produite lors du
                            l'envois de votre message.
                        </div>

                        <h2 class="short">
                            Nous <strong>Contactez</strong>
                        </h2>

                        <h:form id="form1">
                            <div class="row">
                                <div class="form-group">
                                    <div class="col-md-6">
                                        <label>Nom Complet *</label>
                                        <h:inputText type="text"
                                            value="#{messageMBean.message.nomComplet}"
                                            data-msg-required="Entrer votre nom s'il vous plait."
                                            maxlength="100" class="form-control" name="name" id="name" />
                                    </div>
                                    <div class="col-md-6">
                                        <label>Votre email *</label>
                                        <h:inputText type="email"
                                            value="#{messageMBean.message.email}"
                                            data-msg-required="Entrer votre email s'il vous plait."
                                            data-msg-email="Entrer un email valide s'il vous plait."
                                            maxlength="100" class="form-control" name="email" id="email" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label>Sujet *</label>
                                        <h:inputText type="text"
                                            value="#{messageMBean.message.objet}"
                                            data-msg-required="Please enter the subject."
                                            maxlength="100" class="form-control" name="subject"
                                            id="subject" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label>Message *</label>
                                        <h:inputTextarea maxlength="5000"
                                            value="#{messageMBean.message.textMessage}"
                                            data-msg-required="Entrer votre message s'il vous plait."
                                            rows="10" class="form-control" name="message" id="message" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h:commandButton value="Envoyer"
                                        actionListener="#{messageMBean.save}"
                                        class="btn btn-primary btn-lg">
                                        <p:ajax update="form1" />
                                    </h:commandButton>
                                </div>
                            </div>
                        </h:form>

                    </div>
                    <div class="col-md-6">

                        <h4 class="push-top">
                            Get in <strong>touch</strong>
                        </h4>
                        <p>
                            Si vous êtes interéssés par nos services, ou bien vous voulez
                            faire partie de notre equipe, ou vous avez n'import quelle
                            Question!! <strong>N'hesitez pas !</strong>
                        </p>

                        <hr />

                        <h4>
                            Notre <strong>Agence</strong>
                        </h4>
                        <ul class="list-unstyled">
                            <li><i class="icon icon-map-marker"></i> <strong>Addresse:</strong>
                                6 bis, rue Najib Mahfoud, Casablanca</li>
                            <li><i class="icon icon-phone"></i> <strong>TéléPhone:</strong>
                                0212 522 266 545/90</li>
                            <li><i class="icon icon-envelope"></i> <strong>Email:</strong>
                                <a href="mailto:mail@example.com">Corporate@corporate.ma</a></li>
                        </ul>

                        <hr />

                        <h4>
                            <strong>Heurs</strong> de Travail
                        </h4>
                        <ul class="list-unstyled">
                            <li><i class="icon icon-time"></i> Lundi - Vendredi 9am to
                                5pm</li>
                            <li><i class="icon icon-time"></i> Samedi - 9am to 2pm</li>
                            <li><i class="icon icon-time"></i> Dimanche - Fermé</li>
                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <section class="call-to-action featured footer">
        <div class="container">
            <div class="row">
                <div class="center">
                    <h3>
                        Corporate Software, c'est <strong>tous</strong> ce dont vous avez
                        <strong>besoin</strong>! <a
                            href="http://themeforest.net/item/porto-responsive-html5-template/4106987"
                            target="_blank" class="btn btn-lg btn-primary"
                            data-appear-animation="bounceIn">Contactez Nous!</a> <span
                            class="arrow hlb" data-appear-animation="rotateInUpLeft"
                            style="top: -22px;"></span>
                    </h3>
                </div>
            </div>
        </div>
        </section>
    </ui:define>
</ui:composition>

----------- ----------- EDITED

我想我明白发生了什么,但不知道如何撤消它!!!

当xhtml被解析为html <script>标签之间的任何内容变成评论之间<!-- -->我查了一下,这似乎是某种黑客对策!!!,但我不知道知道如何禁用它。

任何想法!! 想你。

1 个答案:

答案 0 :(得分:1)

我发现解决方案非常简单,我教过如果有人需要,我应该分享它。

您在项目中创建新的javascript文件,并在其中复制JS代码并在xhtml文件中写入。

然后将其包含在xhtml中,并在头部显示<script src="file.js"></script>并瞧!!!“

它的工作!!!!

相关问题