Create Custom Google Maps using Google Map API

This blog show how to Create Custom Google Maps using Google Map API.

Introduction

 

In this blog, you can see the code for:

1. Get the current location.
2. Get location using longitude and latitude

For this map you have to add these js.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

Get current location

if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    }
    function success(position) {
        var address;
        var txtLongitude = position.coords.longitude;
        var txtLatitude = position.coords.latitude;
        var geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(txtLatitude, txtLongitude);

        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    alert(results[1].formatted_address + "\r\nLatitude: " + txtLatitude + "\r\nLongitude: " + txtLongitude);
                }
            }
        });
    }

Get location using longitude and latitude

function CreateGoogleMap(latitude, longitude, address) {
        var loc, map, marker;
        loc = new google.maps.LatLng(latitude, longitude);
        map = new google.maps.Map(document.getElementById("Google_Map"), {
            zoom: 12,
            center: loc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        marker = new google.maps.Marker({
            map: map,
            icon: pointer.png",
            position: loc,
            visible: true
        });

        google.maps.event.trigger(map, "resize");
    }

For complete code, you can download the attachment.

 

Thanks