google map with overlay data
<p class="lead">Ever wanted to add a <del>really</del> slightly complex google map to your site?</p>
<h2>Working Example</h2>
<style>
/ Always set the map height explicitly to define the size of the div
element that contains the map. /
#map {
height: 400px;
}
/ Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
var cairns = {lat: -16.9231209, lng: 145.7690145};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: cairns
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
''+
'<div id="bodyContent">'+
'<p><b>Cairns</b>, The City of Cairns was a local government area centred on the ' +
'Far North Queensland city of Cairns. Established in 1885, for '+
'most of its existence it consisted of approximately 51.5 '+
'square kilometres <a href="https://en.wikipedia.org/wiki/CityofCairns" target="blank">wikipedia</a>'+
'</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: cairns,
map: map,
title: 'Cairns (City)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvCBl-k4jpfGnu0TxdPhS7NylxwKQLaw&callback=initMap">
</script>
<br>
<p>To run this you will need your own API key to use the google maps. You can <a href='https://developers.google.com/maps/documentation/javascript/get-api-key' target='blank'>request one from here</a>.</p>
<pre><script async defer<br /> src="https://maps.googleapis.com/maps/api/js?key=<a href='https://developers.google.com/maps/documentation/javascript/get-api-key' target='blank'>[getkey]</a>&callback=initMap"><br /> </script></pre>
<h2>Get your co-ordinates</h2>
<p>To get the lat and long you will need for the map you will need to go to <a href='http://www.google.com/local' target='blank'>maps.google.com</a> and find the location you want to add a pin.</p>
<p>Search for the palace you want to pin</p>
<p>Up in the URL it will have something like this: <code>@-16.9231209,145.7690145,16z</code> these are your lat and long co-ordinates depending on how accurate you want these you can shorten them a little bit to something like this: -16.923 145.769. Actually scrap that you need the whole lot in there for it to be accurate. </p>
<p>Now we know where to drop the pin.</p>
<pre>var cairns = {lat: -16.9231209, lng: 145.7690145};</pre>
<p>Set the Zoom level 1 is all the way out, and ~22 is all the way in.</p>
<pre>var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: cairns
});</pre>
<p>Add the popup window content</p>
<pre>var contentString = '<div id="content">'+<br /> '<div id="siteNotice">'+<br /> '</div>'+<br /> '<h1 id="firstHeading" class="firstHeading">Cairns</h1>'+<br /> '<div id="bodyContent">'+<br /> '<p><b>Cairns</b>, The City of Cairns was a local government area centred on the ' +<br /> 'Far North Queensland city of Cairns. Established in 1885, for '+<br /> 'most of its existence it consisted of approximately 51.5 '+<br /> 'square kilometres <a href="<a href="https://en.wikipedia.org/wiki/CityofCairns">https://en.wikipedia.org/wiki/CityofCairns</a>">wikipedia</a>'+<br /> '</p>'+<br /> '</div>'+<br /> '</div>';</pre>
<p>Add marker and click listener</p>
<pre>var marker = new google.maps.Marker({<br /> position: cairns,<br /> map: map,<br /> title: 'Cairns (City)'<br /> });<br /> marker.addListener('click', function() {<br /> infowindow.open(map, marker);<br /> });</pre>
<p>Thats pretty much it. Find the co-ordinates, add a content and marker, reload and all done. The only issue is you have to do this for each pin and content window that you add, so it can be quite a process to add a bunch of these windows and pins. </p>
<h2>Related Links</h2>
<ul>
<li><a href='https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple' target='blank'>info window simple</a></li>
<li><a href='https://developers.google.com/maps/documentation/javascript/examples/icon-complex' target='blank'>icon complex</a></li>
<li><a href='https://jsfiddle.net/api/post/library/pure/' target='blank'>JSFiddle Map Example</a></li>
<li><a href='https://developers.google.com/maps/documentation/javascript/get-api-key' target='_blank'>Get Google Maps API Key</a></li>
</ul>
View Statistics
Add Comment
Other Items in js
Related Search Terms
Other Categories in Code
Random Quote
Me
