this content was originally posted here.

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.

Related Links

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:Rxtnl
$p4:google-map-with-overlay-data
$p5:
$p6:
$p:/view/code/Rxtnl/google-map-with-overlay-data/
Using Template: view-code.html