Menu
I want to add a map into "map & direction" of my contact page. i am trying google map embed procedure step by step but it didn't work the is i can't view the map. i am using bootstrap.
Here is my mark up:
<head>
<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
<script>
$(document).ready(function() {
var myCenter=new google.maps.LatLng(45.992261, -123.925014);
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
};
var 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);
});
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initialize();
});
});
</script>
<style type="text/css">
#map-canvas {
height:500px;
}
</style>
<head>
<div class="tab-content">
<div class="tab-pane fade" id="map">
<div class="col-md-5">
<h4 class="h4">Find Us at Google Map</h4>
</div>
<div id="map-canvas" class="col-md-7">
</div>
</div>
</div>
262
Kudos to @ymakux comment "It's better to use built-in classes " I have been trawling SO for ages looking to get a Google Map to neatly fit into a bootstrap div and your answer is perfect! So for a newbie like me using maps with Bopotstrap utilizing the sample code supplied by google at https://developers.google.com/maps/documentation/javascript/geolocation
Add divs as suggested by @ymakux just prior to map div similar to this:
<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div>
</div>`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
