Posted in js
9985
6:20 am, August 31, 2018
 

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

View Statistics
This Week
217
This Month
991
This Year
897

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
jqueryui date selector with examples and code with custom date formatting fancybox youtube showing video links in a lightbox - updated with fixed code parts fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector with examples and code jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown
Random CSS Property

@viewport

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
max-height (@viewport) css reference