• Xhanch - WP Manga - Have your own automated manga reader website

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>

Click here to support our work. Thanks :)


2 Responses to “JavaScript – Google Maps With Pointer”

  1. tanvir says:

    Can i use this code commercially ?

    thank you

Leave a Reply

  • NOTICE

    Xhanch Studio is finally online after successfully moved from shared hosting to our own VPS Hosting.

    Please note that our primary email admin@xhanch.com is not functioning yet. So, please send your emails to xhanch@gmail.com for the moment until we resolve this issue.

    Regards, Xhanch Studio
  • Sponsored Ads

    WalkNote.com - A Place to Share, Have Fun and Get Connected Place you ad here
  • PayPal Verified

    Happy with our free services? You may donate us. Thanks!

    Donate
  • Latest Tweets

    Here are our recent tweets:

    • @xhanch Your a legend!!! I have just used the first part of the code so the links are a different colour and it looks fab, Thanks! - posted on 3 days ago via Tweetie for Mac

    • Xhanch - My Twitter 2.0.2 is released. Some minor fixings - posted on 3 days ago via web

    • We have finished the website migration to a VPS server - posted on 3 days ago via web

    • @Bunglenick put this code to custom CSS: {xmt_id}.xmt ul li.tweet_list{color:#ffffff} {xmt_id}.xmt ul li.tweet_list a{color:#ffffff} - posted on 3 days ago via web

    • @xhanch Hi there, how do I go about changing the colour of the text in your twitter app? Its black but I need white. - posted on 5 days ago via Tweetie for Mac