/
Gists
/
Gmaps
Gists - Gmaps
On gists
Gmaps
Google map aka Husinec
map.js #
// GMAP - CUSTOM STYLE
/* https://vanguardprague.psn.cz/ */
$mapStyle = [
{
"featureType": "all",
"elementType": "all",
"stylers": [
{"saturation": "-100"},
{"lightness": "25"},
{"gamma": "1"}
]
}
];
// GMAP - SETTINGS
var mapCenter = {lat: 50.0163867, lng: 14.4035964};
function initialize() {
var myOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: 0,
streetViewControl: 0,
sensor: 'true',
scrollwheel: false,
styles: $mapStyle
}
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, myOptions);
// REZIDENCE
rezidence = new google.maps.Marker({
position: mapCenter,
map: map,
title: 'VANGUARD',
icon: '/img/icons/pin.png'
});
// PSN
psn = new google.maps.Marker({
position: {lat: 50.0853655, lng: 14.4406618},
map: map,
title: 'PSN',
icon: '/img/icons/map-psn.png'
});
var iconBase = '/img/icons/';
var markers = []
var markerGroups = {
"culture": [],
"gastronomy": [],
"nightlife": [],
"shopping": [],
};
var filterMarkers = function (category, state) {
console.log(category);
console.log(state);
for (i = 0; i < markerGroups[category].length; i++) {
var marker = markerGroups[category][i];
marker.setVisible(state);
}
}
$('.mapFilter').change(function () {
filterMarkers($(this).data('category'), $(this).prop('checked'));
});
$.getJSON('/cz/poi', function (data) {
$.each(data, function (i, value) {
category = value.category
var myLatlng = {lat: value.lat, lng: value.lng};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: iconBase + value.icon,
title: value.title.replace('<br>', ','),
url: value.url,
category: category = value.category,
thumbnail: value.thumbnailUrl,
popis: value.popis
});
// infowindow obsah
var contentString = '<div class="gg-content">' +
'<h3>' + marker.title + '</h3>' +
'<p>' + marker.popis + '</p>' +
'</div>';
infowindow = new google.maps.InfoWindow({
//content: marker.title
content: contentString,
maxWidth: 225
});
// marker + infowindow handler
marker.addListener('click', function () {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 225
});
infowindow.open(map, marker);
map.panToOffset(marker.position, 0, -200);
});
markers.push(marker);
markerGroups[category].push(marker);
});
});
}
/* ------ */
On gists
Gmaps
Place multiple markers with infowindow on Google Maps API v3, use external links to trigger click and center map on desired location.
gistfile1.js #
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?language=fra&sensor=false"></script>
<script type="text/javascript">
var map;
var Markers = {};
var infowindow;
var locations = [
[
'Samsung Store Madeleine',
'<strong>Samsung Store Madeleine</strong><p>5 Boulevard Malesherbes, 75008 Paris<br>10h – 20h</p>',
48.8701925,
2.322897600000033,
0
],
[
'Samsung Store Velizy',
'<strong>Samsung Store Velizy</strong><p>CC Velizy 2 <br>2 Avenue de l\'Europe <br>78140 Vélizy-Villacoublay<br>Niveau 0 Porte 3 <br>10h – 22h</p>',
48.78126899999999,
2.219588599999952,
1
]
];
var origin = new google.maps.LatLng(locations[0][2], locations[0][3]);
function initialize() {
var mapOptions = {
zoom: 13,
center: origin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infowindow = new google.maps.InfoWindow();
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var marker = new google.maps.Marker({
position: position,
map: map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 200});
infowindow.open(map, marker);
}
}) (marker, i));
Markers[locations[i][4]] = marker;
}
locate(0);
}
function locate(marker_id) {
var myMarker = Markers[marker_id];
var markerPosition = myMarker.getPosition();
map.setCenter(markerPosition);
google.maps.event.trigger(myMarker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
On gists
Gmaps
google maps - multiple - ekospol (http://www.ekospol.cz/byty/prodej-bytu-praha)
google-maps-multiple-w-animation #
// Define your locations: HTML content for the info window, latitude, longitude
var locations = [
['<div id="iw-container"><div class="iw-title">EKOCITY Hostivař</div><img src="http://www.ekospol.cz/assets/ekospol/ekocity_hostivar/vizualizace/4.jpg" alt="EKOCITY Hostivař" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/ekocity-hostivar/" class="button block-button primary" >Detail projektu</a></div></div>', 50.057417, 14.541753],
['<div id="iw-container"><div class="iw-title">Výhledy Barrandov</div><img src="http://www.ekospol.cz/assets/ekospol/vyhledy_barrandov/vyhledy-barrandov-viz.jpg" alt="Výhledy Barrandov" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/barrandov/" class="button block-button primary" >Detail projektu</a></div></div>', 50.031184, 14.362346],
['<div id="iw-container"><div class="iw-title">Panorama Kyje VIII</div><img src="http://www.ekospol.cz/assets/ekospol/panorama_kyje_viii/panorama-kyje-viii.jpg" alt="Panorama Kyje VIII" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/kyje-viii/" class="button block-button primary" >Detail projektu</a></div></div>', 50.115141, 14.567291],
['<div id="iw-container"><div class="iw-title">Viladomy Dubeč</div><img src="http://www.ekospol.cz/assets/ekospol/viladomy_dubec/viladomy-dubec.jpg" alt="Viladomy Dubeč" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/dubec/" class="button block-button primary" >Detail projektu</a></div></div>', 50.060931, 14.581599],
['<div id="iw-container"><div class="iw-title">EKOCITY Uhříněves I</div><img src="http://www.ekospol.cz/assets/ekospol/ekocity_uhrineves/ekocity-uhrineves.jpg" alt="EKOCITY Uhříněves I" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/ekocity-uhrineves/" class="button block-button primary" >Detail projektu</a></div></div>', 50.031954, 14.590639],
['<div id="iw-container"><div class="iw-title">Panorama Kyje VII</div><img src="http://www.ekospol.cz/assets/ekospol/panorama_kyje_vii/panorama-kyje-vii.jpg" alt="Panorama Kyje VII" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/kyje-vii/" class="button block-button primary" >Detail projektu</a></div></div>', 50.116056, 14.566058],
['<div id="iw-container"><div class="iw-title">Nové Měcholupy VI</div><img src="http://www.ekospol.cz/assets/ekospol/nove_mecholupy_vi/nove-mecholupy-vi.jpg" alt="Nové Měcholupy VI" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/mecholupy-vi/" class="button block-button primary" >Detail projektu</a></div></div>', 50.047834, 14.556056],
['<div id="iw-container"><div class="iw-title">Slunečné terasy</div><img src="http://www.ekospol.cz/assets/ekospol/slunecne_terasy/slunecne-terasy.jpg" alt="Slunečné terasy" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/slunecne-terasy/" class="button block-button primary" >Detail projektu</a></div></div>', 50.038257, 14.318665],
['<div id="iw-container"><div class="iw-title">Michelské zahrady</div><img src="http://www.ekospol.cz/assets/ekospol/michelske_zahrady/michelske-zahrady.jpg" alt="Michelské zahrady" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/michelske-zahrady/" class="button block-button primary" >Detail projektu</a></div></div>', 50.056753, 14.462231]
];
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Setup the different icons and shadows
var iconURLPrefix = 'http://www.ekospol.cz/assets/images/';
var icons = [
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png',
iconURLPrefix + 'home-green.png'
]
var iconsLength = icons.length;
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(50.075452, 14.434719), // Prague
scrollwheel: false,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"color":"#f7f1df"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#d0e3b4"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#bde6ab"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffe15f"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efd151"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"black"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#cfb2db"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#a2daf2"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var infowindow = new google.maps.InfoWindow({
//maxWidth: 172
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
animation: google.maps.Animation.DROP,
map: map,
icon: icons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
function stopAnimation(marker) {
setTimeout(function () {
marker.setAnimation(null);
}, 740);
}
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
// *
// START INFOWINDOW CUSTOMIZE.
// The google.maps.event.addListener() event expects
// the creation of the infowindow HTML structure 'domready'
// and before the opening of the infowindow, defined styles are applied.
// *
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV that wraps the bottom of infowindow
var iwOuter = $('.gm-style-iw');
//* Since this div is in a position prior to .gm-div style-iw.
// * We use jQuery and create a iwBackground variable,
// * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
// */
var iwBackground = iwOuter.prev();
// Removes background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Removes white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': '#00673e 0px 1px 6px', 'z-index' : '1', 'background-color' : '#00673e'});
// Reference to the div that groups the close button elements.
var iwCloseBtn = iwOuter.next();
// Apply the desired effect to the close button
iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #00673e', 'border-radius': '13px', 'box-shadow': '0 0 5px #000000'});
// If the content of infowindow not exceed the set maximum height, then the gradient is removed.
if($('.iw-content').height() < 140){
$('.iw-bottom-gradient').css({display: 'none'});
}
// The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
});
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
}
On gists
Gmaps
From https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
multiple-markers.js #
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
['London Eye, London', 51.503454,-0.119562],
['Palace of Westminster, London', 51.499633,-0.124755]
];
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>London Eye</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Palace of Westminster</h3>' +
'<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
On gists
Gmaps
From http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/3059129#3059129
multiple-marker2.js #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// check DOM Ready
$(document).ready(function() {
// execute
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
// set multiple marker
for (var i = 0; i < 250; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
map: map,
title: 'Click Me ' + i
});
// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!'
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height:500px;"></div>
</body>
</html>
On gists
Gmaps
From http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/3059129#3059129
simple-multiple-marker-google-ma #
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
On gists
Gmaps
Google Maps Simple Multiple Marker Example
Google Maps Simple Multiple Mark #
<html>
<head>
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
On gists
Zjištění LAT / LNG souřadnic - Google maps
•
Gmaps
Lat Lng.php #
<?
function getLatLng($address)
{
$json = json_decode(file_get_contents("http://maps.google.com/maps/api/geocode/json?address=$address&sensor=false"));
$lat = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lat'};
$lng = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lng'};
return array("lat" => $lat, "lng" => $lng);
}