"Google map - contact us"
Bootstrap 3.3.0 Snippet by DiTso

<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') } });*/ });

Related: See More


Questions / Comments: