Error opening map in bootstrap modal

Question

Error opening map in bootstrap modal

Navigation

#1 by (1 votes)

1

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

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

<!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><scriptsrc="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 mapas

asked by anonymous 31.07.2017 / 14:27

score 1 · Accepted Answer

The error is being caused because you are calling the function modal which is boostrap.min.js , but is only referencing the file after you call the function.

To resolve the code:

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

Before this:

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

Error opening map in bootstrap modal

1 answer