Hi everyone, the code below displays a google map when run directly from a page but when embedded inside a bootstrap modal view, the google map content will not be displayed. only the map blank shape is showed. can someone help me with that. Thanks [code] <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js?libraries=places®ion=ng&language=en&sensor=true&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4"></script> </head> <body> <div class="container"> <h2>Google Map</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open MAP</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <br> Address: <input id="searchTextField" type="text" size="50" style=""> <br> <div id="test" style="height: 300px;width: 100%;margin: 0.6em;"></div> <!-- MAP --> <script type="text/javascript"> $(function getMap() { var lat = 13.034118, lng = 77.5679959; latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; //zoomControl: true, //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('test'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function(event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function(event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "latLng": event.latLng }, function(results, status) { console.log(results, status); if (status == google.maps.GeocoderStatus.OK) { console.log(results); var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("#searchTextField").val(results[0].formatted_address); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> [/code]
Register and join over 40,000 other developers!
Recent Topics
-
The Game You Are Waiting For?
WendellHarper - Dec 06 2020 01:21 PM
-
Quora and Reddit Backlinks
WendellHarper - Dec 06 2020 01:14 PM
-
Delete account
pindo - Jul 23 2020 01:33 AM
-
Print specific values from dictionary with a specific key name
Siten0308 - Jun 20 2019 01:43 PM
-
Learn algorithms and programming concepts
johnnylo - Apr 23 2019 07:49 AM
Recent Blog Entries
Recent Status Updates
Popular Tags
- networking
- Managed C++
- stream
- console
- database
- authentication
- Visual Basic 4 / 5 / 6
- session
- Connection
- asp.net
- import
- syntax
- hardware
- html5
- array
- mysql
- java
- php
- c++
- string
- C#
- html
- loop
- timer
- jquery
- ajax
- javascript
- programming
- android
- css
- assembly
- c
- form
- vb.net
- xml
- linked list
- login
- encryption
- pseudocode
- calculator
- sql
- python
- setup
- help
- game
- combobox
- binary
- hello world
- grid
- innerHTML

Google Map cannot be displayed Inside Bootstrap Modal View
Started by mutago, Jan 31 2017 07:41 PM
javascript google-map
No replies to this topic
#1
Posted 31 January 2017 - 07:41 PM
Also tagged with one or more of these keywords: javascript, google-map
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download