Created
July 31, 2019 20:22
-
-
Save antxd/85ec8f147b6e8a1898a22bf27ef06d8f to your computer and use it in GitHub Desktop.
Awesome GoogleMap example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
body * { | |
-webkit-text-size-adjust: none; | |
box-sizing: border-box; | |
} | |
.map-wrapper { | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
width: 100%; | |
height: 100%; | |
} | |
</style> | |
<div class="map-wrapper type-2" id="map-canvas" data-lat="-34.5294681" data-lng="-58.485075300000005" data-zoom="15" data-marker="images/map/marker3.png" data-style="1"> | |
</div> | |
<div class="markers-wrapper addresses-block"> | |
<a class="marker" data-rel="map-canvas" data-lat="-34.522513" data-lng="-58.474851" data-marker="http://shulbius.com/images/map/marker3.png" data-string=' | |
<div class="marker-tooltip"> | |
<span class="sub-title">SHULBIUS Vet</span> | |
<h5 class="h11">Tapiales 1265</h5> | |
<img src="http://shulbius.com/images/map/marker3.png"> | |
<a href="#">FICHA</a> | |
</div>'> | |
</a> | |
<a class="marker" data-rel="map-canvas" data-lat="-34.523578" data-lng="-58.474244" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Café</span><h5 class="h11">Tapiales 1173</h5></div>'></a> | |
<a class="marker" data-rel="map-canvas" data-lat="-34.537212" data-lng="-58.474548" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Bridge</span><h5 class="h11">25 de Mayo 48</h5></div>'></a> | |
<a class="marker" data-rel="map-canvas" data-lat="-34.5209198" data-lng="-58.473979499999984" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Liby</span><h5 class="h11">Av. del Libertador 1362</h5></div>'></a> | |
<a class="marker" data-rel="map-canvas" data-lat="-34.521965" data-lng="-58.474667599999975" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS DREI</span><h5 class="h11">Urquiza 744</h5></div>'></a> | |
</div> | |
<!-- este no va solo para ejemplo --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
/*============================*/ | |
/* 23 - GOOGLE MAPS */ | |
/*============================*/ | |
var _ismobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i); | |
var marker = [], infowindow = [], map, image = $('.map-wrapper').attr('data-marker'); | |
function addMarker(location,name,contentstr,imga){ | |
marker[name] = new google.maps.Marker({ | |
position: location, | |
map: map, | |
icon: imga | |
}); | |
marker[name].setMap(map); | |
infowindow[name] = new google.maps.InfoWindow({ | |
content:contentstr | |
}); | |
google.maps.event.addListener(marker[name], 'click', function() { | |
infowindow[name].open(map,marker[name]); | |
}); | |
} | |
function initialize() { | |
var lat = $('#map-canvas').attr("data-lat"); | |
var lng = $('#map-canvas').attr("data-lng"); | |
var mapStyle = $('#map-canvas').attr("data-style"); | |
var myLatlng = new google.maps.LatLng(lat,lng); | |
var setZoom = parseInt($('#map-canvas').attr("data-zoom"),10); | |
var styles = ""; | |
if (mapStyle=="1"){ | |
styles = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]; | |
}else{ | |
if (mapStyle=="2"){ | |
styles = [{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#f49935"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#fad959"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.local","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#a1cdfc"},{"saturation":30},{"lightness":49}]}]; | |
} | |
} | |
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"}); | |
var draggMap; | |
if (!_ismobile) { | |
draggMap = true; | |
}else{ | |
draggMap = false; | |
} | |
var mapOptions = { | |
zoom: setZoom, | |
disableDefaultUI: false, | |
scrollwheel: false, | |
zoomControl: true, | |
streetViewControl: true, | |
center: myLatlng, | |
draggable: draggMap | |
}; | |
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); | |
map.mapTypes.set('map_style', styledMap); | |
map.setMapTypeId('map_style'); | |
$('.addresses-block a').each(function(){ | |
var mark_lat = $(this).attr('data-lat'); | |
var mark_lng = $(this).attr('data-lng'); | |
var mark_img = $(this).attr('data-marker'); | |
var this_index = $('.addresses-block a').index(this); | |
var mark_name = 'template_marker_'+this_index; | |
var mark_locat = new google.maps.LatLng(mark_lat, mark_lng); | |
var mark_str = $(this).attr('data-string'); | |
addMarker(mark_locat,mark_name,mark_str,mark_img); | |
}); | |
} | |
$(window).load(function(){ | |
if ($('.map-wrapper').length){ | |
setTimeout(function(){initialize();}, 1000); | |
} | |
}); | |
</script> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=GMAPKEY"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment