google map with overlay data
Ever wanted to add a really slightly complex google map to your site?
Working Example
To run this you will need your own API key to use the google maps. You can request one from here.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[getkey]&callback=initMap">
</script>
Get your co-ordinates
To get the lat and long you will need for the map you will need to go to maps.google.com and find the location you want to add a pin.
Search for the palace you want to pin
Up in the URL it will have something like this: @-16.9231209,145.7690145,16z 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.
Now we know where to drop the pin.
var cairns = {lat: -16.9231209, lng: 145.7690145};
Set the Zoom level 1 is all the way out, and ~22 is all the way in.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: cairns
});
Add the popup window content
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Cairns</h1>'+
'<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/City_of_Cairns">wikipedia</a>'+
'</p>'+
'</div>'+
'</div>';
Add marker and click listener
var marker = new google.maps.Marker({
position: cairns,
map: map,
title: 'Cairns (City)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
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.
