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

Get your co-ordinates

To get the lat and long you will need for the map you will need to go to 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">'+
'<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="">wikipedia</a>'+

Add marker and click listener

var marker = new google.maps.Marker({
position: cairns,
map: map,
title: 'Cairns (City)'
marker.addListener('click', function() {, 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.

Related Links

Other Items in js
Page Views

This page has been viewed 334 times.

Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.


Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.