<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="map-holder">
<div class="properties-map" style="position: relative;">
<div id="mapdiv" style="position: relative;"><div class="addressholder">
<div class="addressheader"><img src="https://seo4u.ru/assets/images/seo_logo.svg" width="232" height="82" alt="logo"></div>
<ul>
<li>
<i class="glyphicon glyphicon-map-marker"></i>
<span class="ctnaddr">29829 Santa Margarita Parkway<br/> Suite 100 <br/>Rancho Santa Margarita, CA 92688</span>
</li>
<li>
<i class="glyphicon glyphicon-earphone"></i>
<span class="ctnaddr">888.WEB.HITZ <br/>
Toll Free (888.932.4489) <br/>
Phone 949.713.1410 <br/>
Fax 949.454.2857 </span>
</li>
<li>
<i class="glyphicon glyphicon-envelope"></i>
<span class="ctnaddr"><a href="mailto:">info@etargeting.com</a></span>
</li>
</ul>
</div>
<div lat="56.8389" long="60.6057" id="map" style="height:768px;"></div>
</div>
</div>
</section>
/*-------*/
.map-holder{
position:relative;
}
.map-holder .title-head{
text-align:center;
margin-bottom:15px;
}
.map-holder .title-head p{
font-weight:300;
font-size:20px;color:#515151;
line-height:25px;
}
.map-holder .title-head h1{
font-size:148px;
color:#515151;
font-weight:900;
line-height:150px;
margin:0 0 15px;
}
.map-holder .addressholder{
width:360px;
background:#fff;
position:absolute;
left:50%;
margin-left:-180px;
top:12%;
z-index:9999;
}
.map-holder .addressholder .addressheader{
text-align:center;
padding:15px;
background:#2A5E9F;
}
.map-holder .addressholder ul{
font-style:normal;
list-style:none;
padding:0;
margin:00;
display:table;
}
.map-holder .addressholder ul li{
padding:15px 15px;
display:table
}
.map-holder .addressholder ul li i{
display:table-cell;
vertical-align:middle;
border-right:solid 1px #dddddd;
padding:15px;
}
.map-holder .addressholder ul li i img{
display:table-cell;
vertical-align:middle;
}
.map-holder .addressholder ul li .ctnaddr{
display:table-cell;
vertical-align:middle;
padding:15px;
min-height:80px;
}
.map-holder .addressholder i {
font-size: 34px;
color: #2A5E9F;
}
/*-----------------------------*/
//<script src="https://maps.googleapis.com/maps/api/js?v=3.13&libraries=places"></script>
<script type="text/javascript">
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://maps.googleapis.com/maps/api/js?v=3.13&libraries=places';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var map;
var service;
var latMap;
var longMap;
var g;
var schoolMarkers = [];
var hospitalMarkers = [];
var restaurantMarkers = [];
var doctorMarkers = [];
var shopping_mallMarkers = [];
var movie_theaterMarkers = [];
var foodMarkers = [];
var metro_stationMarkers = [];
var mosqueMarkers = [];
var infowindow;
var html = "";
var markers = [];
function TextualZoomControl(map) {
var g = google.maps;
var control = document.createElement("div");
control.id = "zoomcontrol";
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
control.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode(" "));
g.event.addDomListener(zoomInDiv, "click", function() {
map.setZoom(map.getZoom()+1);
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
control.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode(" "));
g.event.addDomListener(zoomOutDiv, "click", function() {
map.setZoom(map.getZoom()-1);
});
document.body.appendChild(control);
return control;
}
// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.cursor = "pointer";
}
function loadMap() {
g = google.maps;
latMap = $("#map").attr("lat");
longMap = $("#map").attr("long");
var opts_map = {
zoom:15,
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "color": "#927891" },/*#b1c1ce*/
{ "visibility": "on" }
]
},{
"featureType": "landscape",
"stylers": [
{ "color": "#f4f3ec" }
]
},{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{ "color": "#f4f1ea" }/*#dae1e7*/
]
},{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
},{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "hue": "#e9e5dc" }/*#0091ff*/
]
},{
"featureType": "road",
"elementType": "labels.text",
"stylers": [
{ "visibility": "on" }
]
}
],
center: new g.LatLng(latMap,longMap),
disableDefaultUI: true,
scrollwheel: true,
mapTypeControlOptions: {
style: g.MapTypeControlStyle.DEFAULT
},
mapTypeId: g.MapTypeId.ROADMAP,
};
map = new g.Map(document.getElementById("map"), opts_map);
var marker = new g.Marker({
position : new g.LatLng(latMap,longMap),
map : map,
icon: 'images/location-pin.png',
});
// Add self created control
var zoom_control = new TextualZoomControl(map);
zoom_control.index = 1;
$("#zoomcontrol").appendTo("#mapdiv");
infowindow = new google.maps.InfoWindow();
}
window.onload = loadMap;
/*$(".mapBtn").click(function(e){
e.preventDefault();
var type = $(this).attr("type");
if($(this).hasClass('disabled'))
{
addPlaces(type);
//console.log(type);
$(this).removeClass('disabled')
}
else
{
removePlaces(type);
$(this).addClass('disabled')
}
});*/
});
