Skip to content

Instantly share code, notes, and snippets.

@marshyon

marshyon/google_map_api.html

Last active August 29, 2015 14:12
Show Gist options
  • Save marshyon/073aeaee0a4107dbb5e5 to your computer and use it in GitHub Desktop.
Save marshyon/073aeaee0a4107dbb5e5 to your computer and use it in GitHub Desktop.
Download ZIP
Google maps API - customising the icon that appears on the map, the info window that appears which can be styled. Replace 99.99999 numbers with latitude and longitude - use an on line resource to plot these - see comments in code
Raw
google_map_api.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#map-canvas {
height: 600px;
width: 800px;
margin: 0px;
padding: 0px
}
.mylabel {
margin-left: 10px;
}
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_API_KEY">
</script>
<!-- get this from : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js -->
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
function initialize() {
// -> http://www.doogal.co.uk/LatLong.php
// good resource for plotting lat / long accurately
// using google maps to do it
var lat = 99.9999;
var lng = 99.9999;
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = "img/baby-cupcake.png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Home Address - click for more info ...',
icon: image
});
var bubble_content = "<h1>Donec odio</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>";
bubble_content += "<p>Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>";
bubble_content += "<p>Suspendisse urna nibh,</p><p>viverra non, semper suscipit, posuere a, pede.</p>";
bubble_content += "<p><a href=\"https://maps.google.com/maps?q=99.99999,99.9999%28home+address%29&output=classic\">Directions</a></p>";
infoBubble = new InfoBubble({
map: map,
content: '<div class="mylabel">' +bubble_content+'</div>',
position: new google.maps.LatLng(-32.0, 149.0),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(255,255,255)',
borderRadius: 5,
arrowSize: 10,
borderWidth: 1,
borderColor: '#ffffff',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'transparent',
arrowStyle: 2
});
// Listen for user click on marker to open info bubble
google.maps.event.addListener(marker, "click", function(){
//infoWindow.open(map, marker);
infoBubble.open(map, marker);
});
// Listen for user click on map to close any open info bubbles
google.maps.event.addListener(map, "click", function () {
infoBubble.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="container">
<h1>title</h1>
<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