Skip to content

Instantly share code, notes, and snippets.

@stnc

stnc/index.html

Created November 16, 2017 19:48
Show Gist options
  • Save stnc/75125fbbc27894253b5bc22491426553 to your computer and use it in GitHub Desktop.
Save stnc/75125fbbc27894253b5bc22491426553 to your computer and use it in GitHub Desktop.
Download ZIP
google map example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yurtdışı Mağazalarımız</title>
<link href='//fonts.googleapis.com/css?family=PT Sans:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href="//fonts.googleapis.com/css?family=Playfair Display:200,200italic,300,300italic,400,400italic,500,500italic,600italic,600italic,700,700italic,800,800italic,900,900italic&subset=latin,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese,latin-ext" rel="stylesheet" type="text/css" />
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvJBm85qq8-jueHszBS4_9TdtgrHnO4yE"
type="text/javascript"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var lastinfowindow;
var locIndex;
//Credit: MDN
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (fn, scope) {
for (var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
}
}
/*
This is the data as a JS array. It could be generated by CF of course. This
drives the map and the div on the side.
*/
var data = [
{
address: 'Red Sea Mall, First Floor, gate No: 5, King Abdulaziz Road, Jeddah, Saudi Arabia',
title: 'Red Sea Mall',
Latitude: 21.62783,
Longitude: 39.110955,
type: 'shop',
tel: '--',
mail: '--',
loc: 'ar'
},//ara
{
address: 'Prince Mohammad Bin Abdulaziz Street Tahlia. Jeddah Saudi Arabia P.O BOX : 53813',
title: 'Al Tahlia Mall',
Latitude: 21.547548,
Longitude: 39.142947,
type: 'shop',
tel: '--',
mail: '--',
loc: 'ar'
},//ara
{
address: 'King Abdul Aziz SQUARE , Al Fayhaa, Jeddah, Saudi Arabia',
title: 'Al Andulus Mall',
Latitude: 21.507355,
Longitude: 39.218424,
type: 'shop',
tel: '--',
mail: '--',
loc: 'ar'
},//ara
{
address: 'Teatralniy ploshet 5/1 Moscow',
title: 'Center Detsky Mir',
Latitude: 55.760051,
Longitude: 37.625054,
type: 'shop',
tel: '--',
mail: '--',
loc: 'ru'
},//m
{
address: 'Mkad 65-66 km Moscow Oblast',
title: 'Crocus City',
Latitude: 55.819187,
Longitude: 37.385972,
type: 'shop',
tel: '--',
mail: '--',
loc: 'ru'
},//m
{
address: 'Presnenskaya naberajnaya 2 Moscow',
title: 'Afimall',
Latitude: 55.749116,
Longitude: 37.539529,
type: 'shop',
tel: '',
mail: '--',
loc: 'ru'
},//m
{
address: 'Novoryazanskoye sh,8,Kotelniki,Moskovskaya oblast Rusya,140053',
title: 'Outlet Village Belaya Dacha',
Latitude: 55.660833,
Longitude: 37.879524,
type: 'shop',
tel: '+7849 577 52477',
mail: '--',
loc: 'ru'
},
];
//A utility function that translates a given type to an icon
function getIcon(type) {
switch (type) {
case "pharmacy":
return "icons/drugstore.png";
case "hospital":
return "icons/hospital-building.png";
case "shop":
return "icon_bg-map-pin.png";
default:
return "icons/footprint.png";
}
}
function initialize() {
var latlng = new google.maps.LatLng(21.627591, 39.110824);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
data.forEach(function (mapData, idx) {
var latlng = {lat: parseFloat(mapData.Latitude), lng: parseFloat(mapData.Longitude)};
geocoder.geocode({'location': latlng}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: mapData.title,
icon: getIcon(mapData.type)
});
// var contentHtml = "<div style='width:300px;height:200px'><h3>"+mapData.title+"</h3>"+mapData.address+"</div>";
var contentHtml = '<table class="table table-bordered" style="margin-top:1px;">' +
'<tbody><tr>' +
'<td class="label-sto"></td>' +
'<td><strong> ' + mapData.title + '</strong></td> ' +
'</tr> ' +
'<tr><tr>' +
'<td class="label-sto">Adres:</td>' +
'<td> ' + mapData.address + '</td> ' +
'</tr> ' +
'<tr>' +
'<td class="label-sto">Telefon:</td>' +
'<td>' + mapData.tel + '</td>' +
'</tr>' +
'<tr>' +
'<td class="label-sto">Mail:</td>' +
'<td>' + mapData.mail + '</td>' +
'</tbody></table>';
var infowindow = new google.maps.InfoWindow({
content: contentHtml
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
marker.locid = idx + 1;
marker.infowindow = infowindow;
markers[markers.length] = marker;
var wait = true;
setTimeout(wait = true, 2000);
var sideHtml = '<div class="loc" data-locid="' + marker.locid + '"><strong>' + mapData.title + '</strong><br/>';
sideHtml += mapData.address + '</div>';
if (mapData.loc == "ar") {
$("#locs_ar").append(sideHtml);
} else {
$("#locs_ru").append(sideHtml);
}
} else {
console.log("Geocode was not successful for the following reason: " + status);
}
});
});
$(document).on("click", ".loc", function () {
var thisloc = $(this).data("locid");
for (var i = 0; i < markers.length; i++) {
if (markers[i].locid == thisloc) {
//get the latlong
if (lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
</script>
<style>
#map_canvas {
width: 800px;
height: 600px;
float: left;
}
#locs {
margin-top: 0px;
padding: 0 10px;
float: left;
height: 600px;
overflow-y: scroll;
}
.loc:nth-of-type(2n){
background-color: #EEEEEE;
}
.loc {
width: 220px;
cursor: pointer;
margin: 10px 0;
line-height: 1.5;
padding: 10px;
}
.loc strong{
color: blue;
}
label {
width: 200px;
padding: 5px;
}
.container {
width: 1200px;
height: 600px;
}
#form h1 {
text-align: center
}
</style>
</head>
<body onLoad="initialize() ">
<div class="container">
<div id="locs">
<h2>Yurtdışı Mağazalarımız</h2>
<h3>Suudi Arabistan</h3>
<div id="locs_ar"></div>
<h3>Rusya</h3>
<div id="locs_ru"></div>
</div>
<div id="map_canvas"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment