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, google pointer, gevent addlistener rightclick, google map php moving marker, javascript pointer map, javascript google map, google maps pointer javascript, gevent addlistener(map rightclick, javascript pointers, map pointer script, wordpress pointer api, google maps with pointer, Google map with pointer, \singlerightclick\ point, singlerightclick google maps, right click google maps gevent, map pointer javascript, javascript pointers for google maps, google maps marker click singlerightclick, javascript google maps pointers, how to move the pointer in google maps, javascript google map location pointer, google maps set default marker, google maps javascript pointer, google maps fromcontainerpixeltolatlng, Google Maps Firefox pointer, google maps event addListener(map singlerightclick, how to add a pointer to google map api, how to add google map pointer in java, how to add pointers in google maps, how to get a pointer on google, google maps api pointer, google maps api marker bounce, google maps api add pointer, google maps addcontrol click cursor, google maps js pointer, google maps js pointer on map, google maps location pointer, google maps pointers wordpress, google maps pointer value, google maps singlerightclick, google maps with a pointer, google maps pointer script, google maps map fromContainerPixelToLatLng, googleapis move cursor to set loc, googlemap add pointeur, googlemap with marker pointer, googlemaps javascript pointer, googleMaps pointers javascript richfaces#hl=es, google maps move pointer, google maps set info pointer, google地圖 script, green marker for source and destination google maps using javascript, google maps javascript api pointer, add pointer to google maps, custom google maps pointer, disable marker pointer google maps, fromcontainerpixeltolatlng api, get a google map thumb pointer wordpress, get latlng singlerightclick, get singlerightclick latlng, gevent addlistener marker right click, gevent addlistener select location, convert singlerightclick point to lat lng google maps, coding for move pointer from source to destination in google map, code toadd pointers in google maps, addlistener marker rightclick, addlistener mouse actionscript right gevent, addlistener right click, api google pointers, build google map with pointers, changing the google maps pointer, city pointer for google map api, code for mark location on google map in php, gevent addlistener singlerightclick, gevent rightclick, gmarker rightclick, google map javasript rightclick, google map latlng singlerightclick, google api source to destination code in javascript, google map pointer script, google map script with address pointer, google map set pointer, google map singlerightclick, google map singlerightclick get latlng, google map javascript single right click, google map javascript pointer, google map javascript move to, google api move pointer, google api pointer, google code map api pointer array, google com pojnter, google gevent rightclick, google map api and pointer, google map api singlerightclick point get lat, google map get location singlerightclick, Xhanch, Xhanch Studio


Posted on 2010-03-08 by Susanto BSc in Free Script, JavaScript
Code, Pointer, Map, Free, Script, Google Maps, Maps, Coordinate, Javascript, Google, 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.