We are Web Technology Experts Team who provide you Important information on Web Development, Interview Questions and Answers, live project problem and their solution and online free tutorials.
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);
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.
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 < 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>
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 dobold, 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>
