Web & game design services from Leeds, Yorkshire
Web & game design services from Leeds, Yorkshire
Published Tuesday 11th February 2014
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!
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.
Nobody has commented yet.
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.