Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Google maps API example code

Here is the example code for using Google maps API. You can to get API key for your domain here: http://code.google.com/apis/maps/signup.html

Then you can modify code to add functionality with PHP like save locations and map settings to database, etc.

<!--Insert your API key instead of text YourAPIkeyHERE-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YourAPIkeyHERE" 
type="text/javascript">
</script>
<script type="text/javascript">
// <![CDATA[
var p_map_map;
var p_map_marker;
function p_map_sm(map, options)
{
var marker=new GMarker(new GLatLng(options.lt, options.ln), options.o ? options.o : null);
    map.addOverlay(marker);
    if(options.i)
    {
        GEvent.addListener(marker, "mouseover", 
            function() 
            { 
                marker.openInfoWindowHtml(options.i); 
            }
        );
        GEvent.addListener(marker, "mouseout", 
            function() 
            { 
                map.closeInfoWindow(); 
            }
        );
    }
    if(options.lk)
    GEvent.addListener(marker, "click", 
        function() 
        { 
            var w; 
            if(!options.t || !(w = window.open(options.lk, options.t)) || !w.top) 
            { 
                window.location=options.lk;
            }
        } 
    );
}
function p_map_mapload()
{
    //checking compatability
    if(GBrowserIsCompatible())
    {
        //creating map object in div with id="p_map_map"
        p_map_map = new GMap2(document.getElementById("p_map_map"));
        p_map_map.addControl(new GLargeMapControl());
        p_map_map.addControl(new GScaleControl());
        p_map_map.addControl(new GMapTypeControl());
        //setting map center and zoom
        p_map_map.setCenter(new GLatLng(56.8610816, 24.3660383), 9);
        //setting map type
        p_map_map.setMapType(G_NORMAL_MAP); 
        GEvent.addListener(p_map_map, "click", 
            function(marker, point)
            { 
                if(marker!=null) return false; 
                c=new GLatLng(point.lat(), point.lng()); 
                p_map_map.panTo(c); 
                l=document.getElementById("p_map_latitude"); 
                l.value=c.lat(); 
                l=document.getElementById("p_map_long"); 
                l.value=c.lng(); 
        
                if (typeof p_map_marker == "undefined") 
                {
                    p_map_marker = new GMarker(c, { draggable: true  });
                    GEvent.addListener(p_map_marker, "dragend", 
                        function(marker) 
                        { 
                            var point=p_map_marker.getPoint(); 
                            var c=new GLatLng(point.lat(), point.lng()); 
                            p_map_map.panTo(c); 
                            l=document.getElementById("p_map_latitude"); 
                            l.value=c.lat(); 
                            l=document.getElementById("p_map_long"); 
                            l.value=c.lng(); 
                            p_map_marker.setPoint(c); 
                        }
                    );
                    p_map_map.addOverlay(p_map_marker);
                }
                else
                {
                    p_map_marker.setPoint(c); 
                }
            }
        );
        GEvent.addListener(p_map_map, "zoomend", 
            function(oldlevel, newlevel) 
            { 
                l=document.getElementById("p_map_zoom"); 
                l.value=newlevel; 
            }
        );
        GEvent.addListener(p_map_map, "maptypechanged", 
            function() 
            { 
                l=document.getElementById("p_map_map_type"); 
                t=p_map_map.getCurrentMapType(); 
                if(t==G_NORMAL_MAP)
                { 
                    l.value="Normal"; 
                }
                else if(t==G_SATELLITE_MAP) 
                {
                    l.value="Satellite"; 
                }
                else if(t==G_HYBRID_MAP) 
                {
                    l.value = "Hybrid"; 
                }   
            }
        );
        //setting markers
        var p_map_marker1=p_map_sm(p_map_map,
            {
                //latitude
                lt:56.9451614437957,
                //longitude
                ln:24.1074371337891,
                //tooltip title
                o:{title:'Riga'},
                //link style title
                i:'Riga',  
                //link where to go when marker clicked
                lk:'http://www.riga.lv',
                //link target
                t:'_blank'
            }); 
        var p_map_marker2=p_map_sm(p_map_map,
            {
                lt:56.6484159,
                ln:23.713941,
                o:{title:'Jelgava'},
                i:'Jelgava',  
                lk:'http://www.jelgava.lv/',
                t:'_blank'
            }); 
        var p_map_marker3=p_map_sm(p_map_map,
            {
                lt:46.9532621931753,
                ln:1.0986328125,
                o:{title:''},
                i:'France',  
                lk:'',
                t:'_blank'
            }); 
        var p_map_marker4=p_map_sm(p_map_map,
        {
            lt:37.4678842833227,
            ln:-98.7890625,
            o:{title:''},
            i:'North america',  
            lk:'',
            t:'_blank'
        }); 
    }
}
function find_address(val)
{
//creating new
var g = new GClientGeocoder(); 
var c = ''; 
g.getLatLng(document.getElementById("address").value + ", " , function(c) 
{ 
    if(c) 
    { 
        if (typeof p_map_marker == 'undefined') {
            p_map_marker = new GMarker(c, { draggable: true  });
            GEvent.addListener(p_map_marker, 'dragend', function(marker) 
            { 
                var point=p_map_marker.getPoint(); 
                var c=new GLatLng(point.lat(), point.lng()); 
                p_map_map.panTo(c); 
                l=document.getElementById('p_map_latitude'); 
                l.value=c.lat(); 
                l=document.getElementById('p_map_long'); 
                l.value=c.lng(); 
                p_map_marker.setPoint(c);  
            });
            p_map_map.addOverlay(p_map_marker);
        }
        p_map_map.setCenter(c); 
        p_map_marker.setPoint(c); 
        document.getElementById('p_map_long').value=c.lng();
        document.getElementById('p_map_latitude').value=c.lat();
    } 
} ); ; 
return true;
}

function set_center_lat(val)
{
    if(!isNaN(parseFloat(val))) 
    { 
        c=p_map_map.getCenter(); 
        p_map_map.setCenter(new GLatLng(parseFloat(val), c.lng())); 
        p_map_marker.setPoint(p_map_map.getCenter()); 
    }
}
function set_center_lon(val)
{
    if(!isNaN(parseFloat(val))) 
    { 
        c=p_map_map.getCenter(); 
        p_map_map.setCenter(new GLatLng(c.lat(), parseFloat(val))); 
        p_map_marker.setPoint(p_map_map.getCenter()); 
    }
}
//goint to specified location using latitude and longitude
function toLocation(golat, golon)
{
    loc=new GLatLng(golat, golon); 
    p_map_map.panTo(loc); 
}
window.onload = function () 
{ 
    //loading map
    p_map_mapload();    
}
window.onunload = function () 
{ 
    //unloading map
    GUnload();  
}
// ]]>
</script>
<form method="post" action="" name="maps_form">
<p>Enter address: <input type="text" name="address" id="address" size="60" />
<input type="button" name="locate_address" value="Find place" 
        onclick="find_address()" id="locate_address" /></p>
<!--div where map will be, div size will apply to map -->
<div style="width:600px; height:400px;" id="p_map_map"></div>
<p>Lat: <input type="text" name="lat" value="56.8610816" size="15" 
        onchange="set_center_lat(this.value)" id="p_map_latitude" readonly />
&nbsp;Lon: <input type="text" name="lon" value="24.3660383" size="15" 
        onchange="set_center_lon(this.value)" id="p_map_long" readonly />
</p>
<!-- Just to save map parameters if you will want them to save to database-->
<input type="hidden" name="zoom" value="9" id="p_map_zoom" />
<input type="hidden" name="type" value="Normal" id="p_map_map_type" />
<input type="hidden" name="clat" value="56.8610816" id="center_clat" />
<input type="hidden" name="clon" value="24.3660383" id="center_clon" />
</form>
<!--Example of ho you can move through markers Riga and Jelgava are close markers, 
others are far marker-->
<p>Going to places:</p>
<ul>
<li>
<a href="javascript:toLocation(56.9451614437957,24.1074371337891)">Riga</a>
</li>
<li>
<a href="javascript:toLocation(56.6484159,23.713941)">Jelgava</a>
</li>
<li>
<a href="javascript:toLocation(46.9532621931753,1.0986328125)">France</a>
</li>
<li>
<a href="javascript:toLocation(37.4678842833227,-98.7890625)">North America</a>
</li>
</ul>

Example result:

Enter address:

 

Lat:  Lon:

Going to places:


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus