JavaScript – Google Maps With Pointer

Google Map API is an interface for you to put maps on your webpage. It also can be used as an input method for a user to select his address exactly on a map. So, the user does not only type in his address, city, country and other location information as we can found generally on ordinary submit forms. They mark their exact address on the map. Sounds great, isn’t it? Google map API is generally used in real estates websites to provide a more informative and readable detail.

Demo

To move the marker, you may perform a single right click on a new location.

Source Code

<html>
    <head>
        <title>Google Maps API Example</title>
        <script
            src="http://maps.google.com/maps?file=api&v=1&key=<your api key>"
            type="text/javascript">
        </script>
        <!--
            <your api key> is a unique key provided by google map
            You have to replace <your api key> with your api key
            You can get your API key at
http://code.google.com/apis/maps/signup.html
        -->
    </head>
    <body>
        <div id="map" style="width:400px;height:400px"></div>
        To move the marker, you may perform a single right click
        on a new location.
        <script language="JavaScript">
            //By    : Xhanch Studio
            //URL   : http://xhanch.com/
            var map;
            // Define default marker location
            var default_longitute = "-122.141944";
            var default_latitute = "37.441944";
            // Marker/Pointer moved handler
            function move_marker(latlng){
                if(latlng){
                    //Get the selected corrdinate
                    lng = latlng.lng();
                    lat = latlng.lat();
                    //Remove all markers
                    map.clearOverlays();
                    //Set new marker
                    var point = new GPoint(lng, lat);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                }
            }
            // Google Map initialize
            if (GBrowserIsCompatible()) {
                map = new GMap(document.getElementById("map"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                //Set default marker, the zoom we set to 7
                var point = new GPoint(default_longitute, default_latitute);
                map.centerAndZoom(point,7);
                var marker = new GMarker(point);
                map.addOverlay(marker);
                // Assign a single right click event handle
                GEvent.addListener(map, "singlerightclick", function(point){
                    var latlng = map.fromContainerPixelToLatLng(point);
                    move_marker(latlng);
                });
            }
        </script>
    </body>
</html>

Incoming Search Terms

source code php right click and add marker place to google map, fromcontainerpixeltolatlng, gevent addlistener right click, google map pointer, google maps pointer, gevent addlistener rightclick, javascript google map, google pointer, google map php moving marker, javascript pointer map, javascript google map location pointer, map pointer script, google maps marker click singlerightclick, javascript pointers for google maps, \singlerightclick\ point, gevent addlistener(map rightclick, javascript google maps pointers, Google map with pointer, google maps pointer javascript, singlerightclick google maps, right click google maps gevent, map pointer javascript, google maps with pointer, how to move the pointer in google maps, wordpress pointer api, latlng singlerightclick, logo pointer google maps, javascript goolge maps, javascript map single address, javascript mark point, javascript pointer google, how to add a pointer to google map api, green marker for source and destination google maps using javascript, googleMaps pointers javascript richfaces#hl=es, javascript search google maps, location pointer in google map in javasript, mouse right click in gmap in javascript, google地圖 script, how to puy destination pointers on google maps, how to put pointers on google Map, how to put a pointer on a map, how to show maps with pointers in java script, how to move the pointer of google maps, how to show pointer in google map, i need to point 2 pointers on gmap one is source and other is destination using javascript, how to add pointers in google maps, include google maps with pointers in website, java script for put pointer in google map, javascript code to search location in google map, javascript coding for displaying source and destination in google map, javascript for google maps, javascript for putting a map with markers on a webpage, how to add google map pointer in java, map fromContainerPixelToLatLng, map fromcontainerpixeltolatlng in javascript, script search point nya google map, script pointer google map javascript, right click on google map java script code, right click on google earth to put a marker, put pointer on google maps, fromcontainerpixeltolatlng api, put pointer on googl emap, put map with pointer on site, search as google maps in php javascript, Search marker GEvent addListener, wordpress google map customize pointer, ver pointer de google maps javascript, using the blue ball google maps api, url(#default-marker) javascript, singlerightclick google maps api, singlerightclick get latlng, singlerightclick, select javascript:marker click, put a marker googlemaps javascript, pointer on gmap, maps with pointers, map singlerightclick point, map singlerightclick, map pointer javascripy, singlerightclick get latitude, map pointer in javascript, map fromcontainerpixeltolatlng(points) google maps, map fromContainerPixelToLatLng(point), mark a single address in google map api javascript, mark point google maps, pointer events javascript demo, php suburb location select script, php google map move marker, php google api pointers, move marker with google map api, marker pointer on google map, mark setinfo google maps, mark point on google maps javascript, wordpress google maps move pointer, add google map pointer to web page, gevent listener right click, GEvent addListener(marker singlerightclick function(), gevent addlistener(marker right clickt function(), gevent addlistener singlerightclick, gevent addlistener select location, Xhanch, Xhanch Studio


Posted on 2010-03-08 by Susanto BSc in Free Script, JavaScript
Code, Maps, Pointer, Free, Javascript, Map, Script, Coordinate, Google, Google Maps, Xhanch, Xhanch Studio

Tagged as: , , , , , , , , ,

2 Responses to “JavaScript – Google Maps With Pointer”

  1. tanvir says:

    Can i use this code commercially ?

    thank you

Leave a Reply

You must be logged in to post a comment.