Published Tuesday 11th February 2014

Google maps

Google Maps is one of the most effective interactive map tools available on the web. Its most basic implementation is quite simple, however to give it more custom functionality can be quite difficult. To implement a simple Google map simply find the lat long values and change the two lat lon variables below to the returned values. Then copy and paste the code into your website:

Javascript (put this in the footer or at the very least above your division):

<script type="text/javascript" src=""></script>
<script type="text/javascript">
    var lat = 0;
    var lng = 0;
    var google_map_div_id = 'map-canvas'; //You division name
    function initializeGoogleMaps() { //Create the map - change options as necessary
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP

        google_map = new google.maps.Map(document.getElementById(google_map_div_id), mapOptions);


HTML (put this where you want the map, change size as necessary):

<div id="map-canvas" style="width: 500px; height: 500px;"></div>

You should now have a map with your location in the center. With a little more development, you can add pins, polylines, infowindows, radiuses etc. If this sounds like the type of functionality you need then get in touch with us today!

Photo of Steven


Steven is a former QWeb Ltd director and continues to work with us as a contract developer. He's experienced with a number of front-end technologies but is primarily focussed on back-end development, particularly building complicated plugins and bespoke mechanisms for Wordpress.

Blog posts are written by individuals and do not necessarily depict the opinions or beliefs of QWeb Ltd or its current employees. Any information provided here might be biased or subjective, and might become out of date.

Discuss this post

Nobody has commented yet.

Leave a comment

Your email address is used to notify you of new comments to this thread, and also to pull your Gravatar image. Your name, email address, and message are stored as encrypted text. You won't be added to any mailing list, and your details won't be shared with any third party.

This site is protected by reCAPTCHA and the Google Privacy Policy & Terms of Service apply.