Well i'm trying to put a google map into a bootstrap modal, but the images on the map looks like doesn't download or fit well,
this is my js code:
Template.map_template.rendered = function (){
Tracker.autorun(function () {
initialize();
});
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
Tracker.autorun(function () {
$('#map-modal').on('shown.bs.modal', function() {
console.log("Se corre esta funcion")
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
});
}
And this is my template:
<template name="map_template">
<div id="map_canvas">
</div>
</template>
I tried putting this on my css,
#map_canvas img {
max-width: none;
vertical-align: baseline; }
#map_canvas {
max-width:600px;
height: 200px;}
Actually i tried almost everything, and idk if there is something on the boostrap.css or bootstrap.js (Bootstrap 3)that i need to remove or change but my map looks like this:
Guys I hope you can help me, thanks!
Add a callback after the map is loaded and resize it here.
google.maps.event.addListenerOnce( map, 'idle', function() {
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter);
});
It is because of bootstrap's default 15px padding, set it forcefully 0 with using !important and remove scroll bar using overflow:hidden.
Try this
.modal-body{
padding:0 !important;
overflow: hidden !important;
}
Template.map_template.rendered = function (){
Tracker.autorun(function () {
initialize();
});
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
Tracker.autorun(function () {
$('#map-modal').on('shown.bs.modal', function() {
console.log("Se corre esta funcion")
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
});
}
.modal-body{
padding:0 !important;
overflow: hidden !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Google map issue</h3>
</div>
<div class="modal-body">
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d14766.053639766564!2d70.79414485!3d22.296414850000016!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1416911006332" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
</div>
<style>
Related
This question already has answers here:
Find center of multiple locations in Google Maps
(4 answers)
Closed 4 years ago.
I have this code:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map_canvas {
border:1px solid transparent;
height: 400px;
width: 100%;
}
</style>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 padding_all_right_4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_3">
<h2 class="h2">Atrakcje w okolicy</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-1" id="obj-1">
<div class="apartament_atrakcje">Atrakcja 1 pl</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-2" id="obj-2">
<div class="apartament_atrakcje">Atrakcja 2 PL</div>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_0">
<div class="apartament_mapa">
<div id="map_canvas"></div>
<script>
var locations = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 1],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 2],
];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
init();
</script>
The script displays 2 points on the google map.
I have a problem with centering the map on these points. Currently, I enter the coordinates of the centering of the map in the page code, however points on the map are added from the CMS and must center automatically :(
Does anyone know how to do it?
Do you need to center on one point? scaisEdge answer will do that for you.
map.setCenter(new google.maps.LatLng(lat, lng));
Else if what you need is to center on the 'center' of those two points. You'll need to calculate the center point between those two and then center on this new LatLong. For that you can check Google Maps Javascript API
and this post of stackoverflow: Find center of multiple locations in Google Maps
You could use setCenter()
map.setCenter(new google.maps.LatLng(lat, lng));
eg for center on the first marker
map.setCenter(new google.maps.LatLng(locations[0][1], locations[0][2]));
I'm trying to put markers coordinates into the input field but I don't know how to do it ;(
My example is here:
https://skni.org/map.html
I get coordinates in that variable:
var infowindow = new google.maps.InfoWindow({
content: '' + marker.getPosition() + ''
I would like to be able to put couple markers on the map and then all coordinates values should go into the input field so I can send them into the database
My code:
script.js
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
window.initMap = function(){
var haightAshbury = {lat: 52.131514, lng: 20.913248};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: haightAshbury,
mapTypeId: 'satellite'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Set lat/lon values for this property',
draggable: true
});
var infowindow = new google.maps.InfoWindow({
content: '' + marker.getPosition() + ''
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
html code:
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<form action="/action_page.php">
Coordinates:<br>
<input type="text" name="coordinates" size="55" value="How to get coordinates from info window after clicking on markers?">
<br>
<input type="submit" value="Submit">
</form>
<br />
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map"></div>
<p>Click on the map to add markers geocoorditanes.</p>
<div id="map-canvas"> </div>
<script src="script.js" ></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
append this to your addMarker() function:
var allCoordinates = [];
markers.forEach(function(marker){
allCoordinates.push(marker.getPosition().lat() + "," + marker.getPosition().lng());
})
$("input[name=coordinates]").val(allCoordinates);
Of course you should change the format of the coordinates as you need and this can probably be refactored to be more efficient.
I'm obviously making a thing which is meant to show a Map.
Literally nothing happens - no Map, no Errors, no crash and burn.
Here is my code:
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
I've tried changing the width/height of the parent div to PX's with no luck.
Any help is great
Cheers
For a better insight, view the full page code here:
http://pastebin.com/XrRYgtjz
I would say you have two issues.
your map div doesn't have a size (you don't specify the size of the containing element for the anonymous div <div style="height:100%; width: 100%;">).
your MapOptions doesn't contain the required/manditory zoom property.
proof of concept fiddle
code snippet:
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
zoom: 5,
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script deferred async src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I think the problem is in how you've described the new map in your mapOptions variable. Try changing the syntax to something like this, passing mapCanvas as the first argument and the options as the second argument:
var mapOptions = new google.maps.Map(mapCanvas, {
center: {lat: 53.419824, lng: -3.0509294},
mapTypeId: 'satellite',
scrollwheel: true
});
I hope this helps!
<div style="height:100%; width: 100%;">
Maybe problem in height. Try change to 400px.
Or
<div style="height:400px; width: 100%;">
<div id="map-canvas" style="height:100%; width: 100%;></div>
</div>
EDIT
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
I'm trying to insert a Google map into a modal. The modal shows up with the shape of the map present but it's all over gray. I've searched and found suggestions such as calling the map's resize event, or setting the max-width of the map image to none, but none of these suggestions have helped so far.please help me.
javascript
var map;
var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
position:myCenter
});
function initialize() {
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#myMapModal').on('show.bs.modal', function() {
//Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
resizeMap();
})
function resizeMap() {
if(typeof map =="undefined") return;
setTimeout( function(){resizingMap();} , 400);
}
function resizingMap() {
if(typeof map =="undefined") return;
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
html
<div class="modal fade" id="myMapModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div id="map-canvas" class=""></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
css
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
#map-canvas {
width:500px;
height:480px;
}
Do the model the map div is not visible at startup and the is not created porperly .. i suggest you of recall the initialize function in resizeMap on resizenMap function
function resizeMap() {
initialize()
if(typeof map =="undefined") return;
setTimeout( function(){resizingMap();} , 400);
}
function resizingMap() {
initialize()
if(typeof map =="undefined") return;
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
and anyway you must "initialize" the map when you open the modal .. the div containing the map must be visible when the map is created ..
so far the text is centered the google maps page hugs the left and then the text underneath it remains centered, i just want the map to be centered.
<div id="row1">
<div id="note"><img src="http://www.bristol.gov.uk/sites/default/files/styles/hero_image/public/images/children_and_young_people/resources_for_professionals/head_teachers_and_school_administrators/hr/contact_us/we%20will%20be%20back%20soon-sticky%20note.jpg?itok=08vLR_lO"></div>
<div id = "hours">
Sorry<br>
hours<br>
</div>
<div id="gmap_canvas" style="height:500px; width:600px;"></div>
Below text
</div>
Style:
#row1 {
text-align: center;
}
Google Map JavaScript:
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(20.0820037, -14.26733380000002),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(20.0820037, -14.26733380000002)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Crokson Dine In</b><br/>43 Gill Rd<br/>09521 Hovill"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
text-align: center cannot center a block element itself. You need auto margins:
<div
id="gmap_canvas"
style="height:500px; width:600px; margin-left: auto; margin-right: auto;">