Error opening map in modal bootstrap

Asked

Viewed 682 times

1

I have this function that receives the variables and assembles the map. It simply stopped working and on the console appears the error

--- 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>
javascript html maps

  • Um, swap the $ for Jquery and tell me if anything has changed.

  • --- Jquery('#modalMapa'). modal('show'). on('Shown.bs.modal', Function(){*

  • From the bug it seems that you are not loading Jquery, put the Jquery reference in the document.

  • @BS target now appears index.php:63 Uncaught Referenceerror: jquery is not defined

  • I believe Laércio is right. You use Jquery via link? if that is the case your link may no longer exist. http://code.jquery.com/ Here you get the most suitable version.

  • I edited the question @Laérciolopes

  • Beauty, the geturi.js has code JQuery ? some variable starts with $? If you have to reference him after the jquery.js.

  • @Laérciolopes yes geturi.js has a lower function that uses it but via javascript.

Show 3 more comments

1 answer

1


Error is being occasioned because you are calling the function modal that is of boostrap.min.js, but is only referencing the file after it calls the function.

To solve put the code:

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

Before that:

<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>

Browser other questions tagged javascript html maps

You are not signed in. Login or sign up in order to post.