Posted: 11th February 2014

Author: Steven

Tagged: Tutorials

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="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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);
    }

    initializeGoogleMaps();
</script>

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!

Blog posts written by former QWeb employees are not necessarily an accurate indication of the current opinions of QWeb Ltd and the information provided in tutorials might be biased or subjective, or might become out of date.

Discuss this post

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 and you won't be added to any mailing list and your details won't be shared with any third party.