Useful Web Links

Infowindows and google maps.

1. When we place markers on google maps we have the ability to publish more information about the location what the markers represent.
   We can publish quite a lot of information in infowindows. Data and description about the actual location is the basic but apart from that we can place images videos ,reduced size maps or streetview images about the location.

2. Infowindows are assigned to markers not to the map itself. If we want to us ein fowindows first of all we have to create an infowindow object like this: var infowindow = new google.maps.InfoWindow({ content:html });
   We have to define the content of the infowindow. If we have a look at the code above we can see the content:html where html is a variable which is set as : var html = ‘this is an infowindow’;
   If we click on the marker ‘this is an infowindow ‘ will be displayed.

3. As we can see the infowindow opens if we click on the marker.The code responsibile for this action is the following: google.maps.event.addListener(marker, ‘click’, function() { infowindow.open(map,marker)});. If we analize this statement we can find the ‘click’ event defined. If we want the infowindow to open on a different event allwe have to do is to replace ‘click’ with one of the following:dblclick, mousedown, mousemove, mouseout ,mouseover, mouseup, rightclick

4. The variable ‘html’ which is the contend of th infowindow can be customized as a html element. We can place a ‘div’ or other element like headings, paragraphs links images in it.

Google Maps With Multiple Markers

1. As we can place markers on maps displayed by static and dinamic pages we have to follow two different paths. As we have to start with the basics and we don’t want to get lost with all the stuff we have to learn to make dinamic pages we take static pages first. Unlike dinamic pages static pages has staic content and static source code including the code which displays google maps. This is why we need to manually add a few lines of code in order to display an extra marker.The code looks like this: var marker = new google.maps.Marker({ position: myLatlng, map: map, });
   This extra marker would be displayed exacltly where the other marker is so doesnt make too much sense to place it on the map. In order to place a new marker on a new point we have to adjust the values of the myLatLng object which is quite simple, we have to assign different latitude and longitude values : var myLatlng = new google.maps.LatLng(53.321721,-3.487439);

2. If we have a closer look at the second marker we can see it doesn’t look the same as the firs one.This marker is draggable and its not the default markerimage.If we examine the source code on the left hand side of the screen we can find the code lines responsibile for the difference.
   draggable:true makes the marker draggable and icon:’http://www.gpsurgery.info/gp_marker.png’ is placing a differnt markerimage on the map.

3. Markerimagesshould be images with ‘png’ file format. They can be called by their absolute url if the are not on the same site as our page.if they are under the same domain we can call it either absolute or relative url.

4. Title:We can add a title to markers. it is not difficult all we have to do just add title:’this is a nice map tutorial’

Google Maps Basics

1. Before we start working with google maps we have to create a “div” with a specific id and we have to include google maps api. In the actual source code above the div can be found as div id=”map_canvas “. The width and height of the div displaying the map has to be set or in the relevant stylesheet or inline as we do in this tutorial.

2. Google Maps API is a javascript file and when we want to display google maps we include it in the head of the page between javascript opening and closing tags.

3. When the container div which is usually called map_canvas or something similar ( could be called anything else) created and the google map api is called we are ready to write the code which will make our maps work. As the code is javascript it has to be written between javascript opening and closing tags exactly the same way as the Google API.

4. If we have a look at the source code above we can see that all the javascript code we have written is in a function called “initialize”. This function has to be called when the page loads in a browser and to make sure this happen we added onload=”initialize()” to the “body” html tag.

5. The statement “var myLatlng = new google.maps.LatLng(-25.363882,131.044922);”creates an object called“myLatlng”which represents a point on the map having two values a latitude and a longitude . In this case “Latitude=-25.363882″ and “Longitude=131.044922″

6. The statement var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); creates a “map” object in the “map_canvas”element which is a div.

7. ” zoom: 4″sets the zoom of the map to 4,” center: myLatlng” sets the center of the map to the point of myLatlng ” mapTypeId: google.maps.MapTypeId.ROADMAP”sets the type of the map to ROADMAP

8. The statement” var marker = new google.maps.Marker({ position: myLatlng, map: map,});”Places a marker on the map at the position of myLatLng which is the same as the center of the map.

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