Showing posts with label Google map integration. Show all posts
Showing posts with label Google map integration. Show all posts

Monday 9 January 2017

How to integrate Google Places Search API in website?

How to integrate Google Places Search API in website?

Get the Google API Key
  1. Login to https://console.developers.google.com
  2. Get the API Keys.
  3. Enable "Google Places API Web Service" from Google Google Map API



HTML Code

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=places&amp;key=HERE_YOUR_KEYS"></script>
<div class="search-Form">
<input id="search" name="q" type="text" value="" /> <input id="submit" type="submit" value="go" />
</div>



JavaScript Code

    var lat
    var lon
    function initialize() {
        var input = document.getElementById('search');
        var autocomplete = new google.maps.places.Autocomplete(input);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            lat = place.geometry.location.lat()
            lon = place.geometry.location.lng()
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

View Demo

Saturday 11 April 2015

How can I check whether Google Maps is fully loaded in GMaps v3


Problem 1: How can I check whether Google Maps is fully loaded in GMaps v3?
Problem Description: I want to add few codes just after the google map is fully loaded in browser.

Solution:
google.maps.event.addListenerOnce(map, 'idle', function(){
    // console.log('Google map is fully loaded in Gmap V3')
});

You can write your code inside this {}, It will be called when Google map V3 is fully loaded OR failed  to load due to any reason.



Problem 2: How can I change the color of a Google Maps marker In Gmaps 3?
Problem Description:
I want to change the color of default google markers
OR
want to show my image instead of default google marker.
var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'mymarker.png'
});

Replace the "mymarker.png" with your image including path.



Thursday 7 August 2014

Goole Map - Track your moving Position on google map- html5

Goole Map - Track your moving Position on google map- html5

This will enable to you get the current position of your location in mobile. First it will tell your current position on the Google map in form of Pushpin. When you start changing your position then pushpin will start moving. It will be follow you. But GPS and internet must be support by your mobile and off-course it should be enabled in your mobile. It will also work in 2G/3G/4G. It will give your more accurate when you are in City area.

How its work:
It will check your current position with use of browser html5 property. Thats why it ask "Are you want to share your current location".To see your position you must give the access of your current position to the browser. After getting your position it simply plot on google map. When you change your position it recheck the position with use of GPS and update the pushpin on google map.


Initializing...

<style>
    body {font-family: Helvetica;font-size:13pt;padding:0px;margin:0px}
    #map_canvas{display:none; height:100%; width:100%; position:relative;z-index:1;}
    #current {padding:5px; background-color:#000; position:unset; left:0px;z-index:2;text-align:center;width:90%;opacity:0.4;color:#FFF;border-radius:0px 0px 5px 5px; font-weight:bold;}
    #btnCont{position:absolute; bottom:0px; left:0px; width:100%; text-align:center;z-index:2;}</style>


<div id="current">
Initializing...</div>
<div id="map_canvas" style="height: 300px; width: 800px;">
</div>
<div id="btnCont" style="display: none;">
<button onclick="startAgain();"> Restart Tracking</button>
    <button onclick="stopTracking();"> Stop Tracking</button>
</div>
<script charset="utf-8" src="//mapduck.com/js/geoPosition.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


<script>
    var gmap = null;
    var markers = [];
    var opts = {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
    };
            
    function initialiseMap(){
        var myOptions = {
            minZoom : 3,
            zoom: 10,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP      
        } 
        gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
      
    function initialise(){
        if(geoPosition.init())
        {
            document.getElementById('current').innerHTML="Receiving...";
            geoPosition.getCurrentPosition(showPosition,handle_errors,opts);
        }
        else
        {
            document.getElementById('current').innerHTML="Functionality not available";
        }
    }
            
    function handle_errors(error){
        var error_str='';
        switch(error.code)
        {
            case error.PERMISSION_DENIED: 
                error_str="User(you) did not share your geolocation";
                break;
 
            case error.POSITION_UNAVAILABLE: 
                error_str="Could not detect current position";
                break;
 
            case error.TIMEOUT: 
                error_str="retrieving position timed out";
                break;
 
            default: 
                error_str="unknown error";
                break;
        }
        document.getElementById('current').innerHTML=error_str;
    }
   
    function showPosition(p){
        if(gmap == null){
            document.getElementById('map_canvas').style.display = 'block';
            initialiseMap();
        }
        var latitude = parseFloat( p.coords.latitude );
        var longitude = parseFloat( p.coords.longitude );
        document.getElementById('current').innerHTML="Lat = " + latitude.toFixed(2) +" and Long = " + longitude.toFixed(2);
        var location = new google.maps.LatLng( latitude , longitude);
        gmap.setCenter(location);

        var marker = new google.maps.Marker({
            position: location,
            map: gmap,
            title:"You are here"
        });
        markers.push(marker);
    
        var infowindow = new google.maps.InfoWindow({
            content: "<strong>This is your current location.</strong>"
        });
    
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(gmap,marker);
        });
        document.getElementById('btnCont').style.display = 'block';
    }
   
    function setAllMap(map) {
        for (var i = 0; i &lt; markers.length; i++) {
            markers[i].setMap(map);
        }
    }
    
    function deleteMarkers() {
        setAllMap(null);
        markers = [];
    }
            
    var watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
   
    function trace(position){
        geoPosition.getCurrentPosition(position);
        deleteMarkers();
        showPosition(position);
    }
   
    function startAgain(){
        navigator.geolocation.clearWatch(watchID);
        watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
    }   
   
    function stopTracking(){
        navigator.geolocation.clearWatch(watchID);
    }
    google.maps.event.addDomListener(window, 'load', initialise);

</script>


Thursday 17 July 2014

Google Maps - Modifying Controls



Google Maps - Modifying Controls


<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script>
function initialize5()
{
 var mapProp5 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map5=new google.maps.Map(document.getElementById("googleMapId5"),mapProp5);
}
google.maps.event.addDomListener(window, 'load', initialize5);
</script>
<div id="googleMapId5" style="height: 300px; width: 670px;">
</div>

Google Map Integration Add InfoWindow in Marker

Many Web application show the locations on Google map like list of Hotels, Hostels, Origin & Destination in form of marker

When we click on these markers a small popup window open, that describe about that location. Its very useful functionality of Google map because we can can't show the address in Google map but we can show the Marker in Google map. 

We can show lot of markers with different categories and also these markers can be customized, means we can show our custom image instead of Google Marker. Also can do lot of animation with marker.

We can add rich text in the info popup window. means you can do bold, italic, text align and add images. You can put full address with images in the info box.


<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script>
    /** Add lat/lng of your location **/
    var myCenter3=new google.maps.LatLng(51.508742,-0.120850);

    function initialize3()
    {
        var mapProp3 = {
            center:myCenter3,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map3=new google.maps.Map(document.getElementById("googleMapId3"),mapProp3);

        var marker3=new google.maps.Marker({
            position:myCenter3
        });

        marker3.setMap(map3);

        var infowindow = new google.maps.InfoWindow({
            content:"We are <b>web technology experts</b>, You can also add images here."
        });
        
        infowindow.open(map3,marker3);
    }
    google.maps.event.addDomListener(window, 'load', initialize3);
</script>
<div id="googleMapId3" style="height: 300px; width: 650px;">
</div>


Google Map - Add a marker

Google Map - Add a marker to the Google map
The Marker constructor creates a marker in Google Map. Position property must be set for the marker to display.
Add the marker to the map by using the setMap() method.



<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script>
    /** Add lat/lng of your location **/
    var myCenter2=new google.maps.LatLng(51.508742,-0.120850);

    function initialize2()
    {
        var mapProp2 = {
            center:myCenter2,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map=new google.maps.Map(document.getElementById("googleMapId2"),mapProp2);

        var marker2=new google.maps.Marker({
            position:myCenter2,
            animation:google.maps.Animation.BOUNCE
        });

        marker2.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize2);
</script>
<div id="googleMapId2" style="height: 500px; width: 800px;">
</div>



Saturday 2 February 2013

Google map integration

Google Map - Simple Example


<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script>
function initialize()
{
var mapProp = {
    /** Add lat/lng of your location **/
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP//try SATELLITE,HYBRID,TERRAIN
  };
var map=new google.maps.Map(document.getElementById("googleMapId1"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


<div id="googleMapId1" style="height: 300px; width: 650px;">
</div>


Sensor: The sensor parameter is required & it indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location. Set this value to either true or false.

Zoom: The zoom property specifies the initial zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

MapTypeId: The mapTypeId property specifies the initial map type to display.
The following map types are supported:
  1. ROADMAP (normal, default 2D map)
  2. SATELLITE (Photographic map)
  3. HYBRID (Photographic map + roads and City)
  4. TERRAIN