Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple, custom Google Map (API 3.0)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<meta charset="UTF-8">
<title>Example Google Map</title>
</head>
<body>
<div id="map-canvas" style="height:400px; width:600px;"></div>
<script>
function initialise() {
var myLatlng = new google.maps.LatLng(53.068165,-4.076803); // Add the coordinates
var mapOptions = {
zoom: 8, // The initial zoom level when your map loads (0-20)
minZoom: 6, // Minimum zoom level allowed (0-20)
maxZoom: 17, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: myLatlng, // Centre the Map to our coordinates variable
mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div
var image = new google.maps.MarkerImage("https://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
var marker = new google.maps.Marker({ // Set the marker
position: myLatlng, // Position marker to coordinates
icon:image, //use our image as the marker
map: map, // assign the marker to our map variable
title: 'Click to visit our company on Google Places' // Marker ALT Text
});
// google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
// window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
// });
var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // HTML contents of the InfoWindow
});
google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
infowindow.open(map,marker); // Open our InfoWindow
});
google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
</body>
</html>
@Ampmy123

This comment has been minimized.

Copy link

@Ampmy123 Ampmy123 commented Oct 11, 2013

Nice!!! Is it possible to embed google map to SSRS 2008 ?

@bavington

This comment has been minimized.

Copy link
Owner Author

@bavington bavington commented Jan 21, 2014

Possibly, I'm not familiar with that setup though? Have you attempted it yet?

@omgbbqhaxx

This comment has been minimized.

Copy link

@omgbbqhaxx omgbbqhaxx commented Mar 25, 2014

@salmanseahmed

This comment has been minimized.

Copy link

@salmanseahmed salmanseahmed commented Feb 9, 2016

Is there anyway to add some kind of control to turn the marker (or a layer or markers) on/off? Thanks for your tutorial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment