1

Tenho essa função que recebe as variaveis e monta o mapa. Ela simplesmente parou de funcionar e no console aparece o erro

--- index.php:196 Uncaught ReferenceError: $ is not defined

--- $('#modalMapa').modal('show').on('shown.bs.modal', function(){*

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/geturi.js"></script>
<script src="js/jquery.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyC7XYX6dcQmlOcBSuJXVFRRsLkHz8WcruY"></script>
<script src="js/gmaps.js"></script> 

<title></title>


<script type="text/javascript">

    function chamaModalMapa(latitude,longitude,cliente){
        var map;
        $('#modalMapa').modal('show').on('shown.bs.modal', function(){
            map = new GMaps({
                div: '#map',
                center:{
                    lat: latitude,
                    lng: longitude
                },
                zoom: 18,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                styles: [{
                    "featureType": "poi",
                    "stylers": [
                    { "visibility": "off" }]
                }]
            });

            map.addMarker({
                lat: latitude,
                lng: longitude,
                infoWindow: {
                    content: '<div style="padding-top:8px;color:#333;"><p>'+cliente+'</p></div>'                    
                },
                animation: google.maps.Animation.DROP,
            }); 
            var markerInstance = map.markers[0];
            markerInstance.infoWindow.open(map, markerInstance);
        });         
    };

</script>

</head>

<body>


<!-- CONTEUDO -->


<div class="modal fade" id="modalMapa" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align" id="Heading">Local de Entrega</h4>
            </div>

            <div class="modal-body">
                <div id="map" style="width: 100%;height: 350px;">

                </div>

                <div class="modal-footer ">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>


</body>

</html>
8
  • Humm, troque o $ por Jquery e me diz se mudou alguma coisa.
    – Bsalvo
    Commented 31/07/2017 às 12:56
  • --- Jquery('#modalMapa').modal('show').on('shown.bs.modal', function(){*
    – Bsalvo
    Commented 31/07/2017 às 12:56
  • Pelo erro parece que não está carregando o Jquery, coloque a referência do Jquery no documento. Commented 31/07/2017 às 13:01
  • @Bsalvo agora aparece index.php:63 Uncaught ReferenceError: jquery is not defined Commented 31/07/2017 às 13:41
  • Acredito que o Laércio tenha razão. Você usa Jquery através de link? se for isso pode ser que seu link não exista mais. code.jquery.com Aqui você pega a versão mais adequada.
    – Bsalvo
    Commented 31/07/2017 às 13:47

1 Resposta 1

1

O erro está sendo ocasionado porque você está chamando a função modal que é do boostrap.min.js, mas só está referenciando o arquivo depois que chama a função.

Para resolver coloque o código:

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

Antes desse:

<script type="text/javascript">

    function chamaModalMapa(latitude,longitude,cliente){
        var map;
        $('#modalMapa').modal('show').on('shown.bs.modal', function(){
            map = new GMaps({
                div: '#map',
                center:{
                    lat: latitude,
                    lng: longitude
                },
                zoom: 18,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                styles: [{
                    "featureType": "poi",
                    "stylers": [
                    { "visibility": "off" }]
                }]
            });

            map.addMarker({
                lat: latitude,
                lng: longitude,
                infoWindow: {
                    content: '<div style="padding-top:8px;color:#333;"><p>'+cliente+'</p></div>'                    
                },
                animation: google.maps.Animation.DROP,
            }); 
            var markerInstance = map.markers[0];
            markerInstance.infoWindow.open(map, markerInstance);
        });         
    };

</script>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .