Estou tentando colocar um mapa no meu site usando o GMAP3 porem fica dando esse erro:
Uncaught ReferenceError: google is not defined gmap.min.js:13
- r @ gmap3.min.js:13 t.fn.gmap3 @ gmap3.min.js:13 (anonymous function) @ (index):145 x.Callbacks.l @ jquery-2.0.3.min.js:4 x.Callbacks.c.fireWith @ jquery-2.0.3.min.js:4 x.extend.ready @ jquery-2.0.3.min.js:4 S @ jquery-2.0.3.min.js:4
Função
<script type="text/javascript"> $(function(){ $("#test1").gmap3({ marker:{ latLng: [-20.3118511,-40.3065644], options:{ draggable:true }, events:{ dragend: function(marker){ $(this).gmap3({ getaddress:{ latLng:marker.getPosition(), callback:function(results){ var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:"infowindow"}), content = results && results[1] ? results && results[1].formatted_address : "no address"; if (infowindow){ infowindow.open(map, marker); infowindow.setContent(content); } else { $(this).gmap3({ infowindow:{ anchor:marker, options:{content: content} } }); } } } }); } } }, map:{ options:{ zoom: 17, scrollwheel: false }, scaleControl: true, panControl: false, navigationControl: false, mapTypeId: 'roadmap', streetViewControl: false, } }); }); </script>
HTML:
<div id="test1" class="gmap3"></div>
CSS:
.gmap3{ height:400px; width: 100%; float:left; } #gmap3-menu{ background-color: #FFFFFF; width:170px; padding:0px; border:1px; cursor:pointer; border-left:1px solid #cccccc; border-top:1px solid #cccccc; border-right:1px solid #676767; border-bottom:1px solid #676767; } #gmap3-menu .item{ font-family: arial,helvetica,sans-serif; font-size: 12px; text-align:left; line-height: 30px; border-left:0px; border-top:0px; border-right:0px; padding-left:30px; background-repeat: no-repeat; background-position: 4px center; } #gmap3-menu .item.itemA{ background-image: url(images/icon_greenA.png); } #gmap3-menu .item.itemB{ background-image: url(images/icon_greenB.png); } #gmap3-menu .item.zoomIn{ background-image: url(images/zoomin.png); } #gmap3-menu .item.zoomOut{ background-image: url(images/zoomout.png); } #gmap3-menu .item.centerHere{ background-image: url(images/here.png); } #gmap3-menu .item.hover{ background-color: #d6e9f8; } #gmap3-menu .item.separator{ border-bottom:1px solid #cccccc; }