Simple Google Maps

5th May

2011

written by admin


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>

</head>
<body onload="initialize()">
<div id="map_canvas"style="width:330px;height:330px;"></div>

</body>

</html>

Welcome our Google Maps API3 training section!

As the directory sites set up by Webforless required google map integrations into wordpress installations we had to start learning how these maps work and how to integrate them. We learnt a lot in the last four or five month, but we did it in the hard way. We read tutorials then we coded on notepad or dramweaver tried, didnt work then we tried again workred but looked funny.This was a annoying process especially when we had to work with maps displaying data from databases. Most of us knows the process. Edit-save-ftp-page refresh.
This is when we decided to create a google map live editor. You can find something similar at “Google playground” but the full source code is not displayed and there are no explanations or instructions provided.
This tutorial section covers Google Maps API3, WordPress and Joomla integration and the required PHP,MySQL and Javascript knowledge. Follow our tutorials and you can learn everything you need to create and embedd google maps in your websites.

How does this live editor work?

The source code of a full html page is visible on the left hand side of the screen.If you edit the code and submit it clicking the “check your map code ” button the html page generated by the submitted source code comes live.This is what you would see in a browser window if you would copy and paste the code from the left hand side into a html page.

Instructions and explanations.

As this tutorial is all about Google Maps, WordPress and scripting languages we dont write about the html elements of the source code unless they are related to the program flow of the scripts.
Explanations and instructions are mainly related to the code snippets between the opening and closing script tags

Useful Web Links

Google Maps & WordPress