|
|
 |
| View Screen Shot |
|
Start HTML with doc-type, title, meta-tags to take
benefits of SEO
<html>
<head>
<title>Map View Example With bootstrap</title>
<meta content="cover map, example, bootstrap, map view, marker,
infowindow, list" name="keywords" >
<meta content="Full screen map with marker and infowindow using
bootstrap" name="description">
<meta name="author" content="Guruprit Mukhraiya">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Some css to make map covered to whole page and side bar for
list want to show
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar {
margin-bottom: 0px;
}
#map {
position:absolute; top:0px; bottom:0; margin:0;
padding: 0;
}
#offer-ls {
position:absolute; bottom:0; overflow-x: hidden;
overflow-y: auto; right: 0;background:#fafafa;margin:0; padding: 0;top:
60px; z-index: 2;
}
</style>
</code>
Header navigation using simple bootstrap
<div class="header">
<nav class="navbar navbar-default
navbar-fixed-top">
<div class="container">
<div
class="navbar-header">
<button type="button"
class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand"
href="#"><img src="#" alt="Map View
Example" class="img-responsive" style="height:45px;"
/></a>
</div>
</div>
</nav>
</div>
Body content as map and side bar list using bootstrap columns
<div
class="row container-fluid">
<div id="map"
class="col-md-8"></div>
<div id="offer-ls" class="col-md-4
pull-right">
<div
class="list-group">
<div
class="row list-group-item active">
<div class="col-md-12">
<h4
class="list-group-item-heading">ABC</h4>
<p class="list-group-item-text">Lorem
ipsum dolor sit amet, consectetur adipiscing elit ultricies libero.</p>
<p>
<a class="btn btn-danger"
href="/offer/viewOfferPage.htm?o_d=61&p_d=25">Show
More</a>
<button class="btn
btn-warning" type="button">View On Map</button>
</p>
</div>
</div>
<div
class="row list-group-item">
<div class="col-md-12">
<h4
class="list-group-item-heading">XYZ</h4>
<p class="list-group-item-text">Lorem
ipsum dolor sit amet, consectetur adipiscing elit ultricies libero</p>
<p>
<a class="btn btn-danger"
href="/offer/viewOfferPage.htm?o_d=61&p_d=25">Show
More</a>
<button class="btn
btn-warning" type="button">View On
Map</button>
</p>
</div>
</div>
</div>
</div>
</div>
Scripts to initialize the google map and append it to your
div, I have taken some sample location for example you can dynamically
populate the locations or other properties according your requirement. Add
Marker and info windows to that marker using below script
<script>
function initMap() {
var bounds = new
google.maps.LatLngBounds();
var locations = ["Shivaji Nagar,
Pune", "MG Road, Pune", "Baner, Pune"];
var map = new
google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: pune,
mapTypeControl:
false,
streetViewControl:
false,
rotateControl:
false,
disableDefaultUI:
true
});
var geocoder = new
google.maps.Geocoder();
var punewindow = new
google.maps.InfoWindow({
content: "Pune"
});
var pune = geocodeAddress(geocoder,
map, "Pune", punewindow, bounds);
$.each(locations, function( index,
value ) {
var infowindow = new
google.maps.InfoWindow({
content: value
});
geocodeAddress(geocoder, map, value, infowindow, bounds);
});
}
function geocodeAddress(geocoder, resultsMap, address,
infowindow, bounds) {
geocoder.geocode({'address': address},
function(results, status) {
if (status ===
google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
var marker = new
google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
title: 'Twitter'
});
marker.addListener('mouseover', function() {
infowindow.open(resultsMap, marker);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
bounds.extend(marker.getPosition());
resultsMap.fitBounds(bounds);
} else {
alert('Geocode was
not successful for the following reason: ' + status);
}
});
}
</script>
Import map script into your page 'v=3' attribute is used for version 3 for
google map api's. if you are facing some issue with your map you can add this
attribute in url and get it solved.
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl2S6GxtDlYHCNJalZ255v3orh8xdgQZc&signed_in=false&callback=initMap&sensor=true&v=3"></script>
Bottom navigation using simple bootstrap with inverse color
<nav
class="navbar navbar-inverse navbar-fixed-bottom"
role="navigation">
<div class="container">
<div
class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MAP
EXAMPLE</a>
</div>
<div class="collapse
navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-8">
<ul class="nav navbar-nav">
<li><a href="#" class="text-muted"
target="_blank">Link-1</a></li>
<li><a href="#" class="text-muted"
target="_blank">Link-2</a></li>
<li><a href="#" class="text-muted"
target="_blank">Link-3</a></li>
<li><a href="#" class="text-muted"
target="_blank">Link-4</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
|
No comments:
Post a Comment