Skip to content

Instantly share code, notes, and snippets.

@vtastek

vtastek/index.html

Forked from sergiobarriel/index.html
Created July 28, 2020 13:12
Show Gist options
  • Save vtastek/9e4f428f11f9af3864588bc7d1649bb3 to your computer and use it in GitHub Desktop.
Save vtastek/9e4f428f11f9af3864588bc7d1649bb3 to your computer and use it in GitHub Desktop.
Download ZIP
Simple integration of Google Maps through Javascript (Requires jQuery)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple integration of Google Maps through Javascript</title>
<style media="screen">
html, body { font-family: monospace;}
.map-container .map-canvas {
height: 350px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<h1>Simple integration of Google Maps through Javascript</h1>
<h2>How to use</h2>
<p>Just replace the example API key with your own APY key obtained from the <a href="https://console.developers.google.com" target="blank">Google Developers Console.</a> You can also download marker icons from <a href="http://map-icons.com/" target="blank">Map Icons</a></p>
<section class="maps">
<!-- simple map -->
<h1>Simple map</h1>
<h3>Required:</h3>
<ul>
<li>Latitude</li>
<li>Longitude</li>
<li>Zoom</li>
</ul>
<!-- copy from here... -->
<div class="map-container" data-latitude="40.4660059" data-longitude="-3.6892607" data-zoom="18">
<div class="map-canvas" id="example-1"></div>
</div>
<!-- to here... -->
<!-- map with marker -->
<h1>Map with marker</h1>
<h3>Required:</h3>
<ul>
<li>Latitude</li>
<li>Longitude</li>
<li>Zoom</li>
<li>Icon URL</li>
</ul>
<!-- copy from here... -->
<div class="map-container" data-latitude="40.3923764" data-longitude="-3.6886239" data-zoom="18" data-icon-url="icon.png" data-icon-alt="Map">
<div class="map-canvas" id="example-2"></div>
</div>
<!-- to here... -->
<!-- map with marker and popup -->
<h1>Map with marker and info window</h1>
<h3>Required:</h3>
<ul>
<li>Latitude</li>
<li>Longitude</li>
<li>Zoom</li>
<li>Icon URL</li>
<li>Info Window</li>
</ul>
<!-- copy from here... -->
<div class="map-container" data-latitude="40.3923764" data-longitude="-3.6973219" data-zoom="18" data-icon-url="icon.png" data-icon-alt="Map" data-info-window="This is a marker!">
<div class="map-canvas" id="example-3"></div>
</div>
<!-- to here... -->
</section>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="map.js"></script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&amp;callback=initializeMap"></script>
</body>
</html>
Raw
map.js
function initializeMap() {
$('.map-container').each(function(k, v){
var Map;
// Icon parameters
var iconURL = $(this).attr('data-icon-url');
var iconAlt = $(this).attr('data-icon-alt');
// Info Window parameters
var infoWindowString = $(this).attr('data-info-window');
// Map parameters
var latitude = $(this).attr('data-latitude');
var longitude = $(this).attr('data-longitude');
var latitudeAndLongitude = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var zoom = parseInt($(this).attr('data-zoom'));
var canvasId = $(this).find('.map-canvas').attr('id');
// Map
Map = new google.maps.Map(document.getElementById(canvasId), {
center: latitudeAndLongitude,
zoom: zoom
});
// Icon (marker)
if(iconURL != undefined && iconURL != "") {
var Marker = new google.maps.Marker({
content: iconAlt,
position: latitudeAndLongitude,
map: Map,
icon: iconURL
});
// Info window
if(infoWindowString != undefined && infoWindowString != "") {
var InfoWindow = new google.maps.InfoWindow({
content: infoWindowString
});
// Click event
Marker.addListener('click', function() {
InfoWindow.open(Map, Marker);
});
}
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment