Tuesday, 4 February 2014

Locate Multiple Location With Particular Image For Particular Location On Google-Map

Here you can find the code please click below
DEMO
Index.html
<!DOCTYPE html>
<html>
 <head>
   <title>Places Autoloaded</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
 
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

   <style>
     input {
       border: 1px solid  rgba(0, 0, 0, 0.5);
     }
     input.notfound {
       border: 2px solid  rgba(255, 0, 0, 0.4);
     }
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}

#map-canvas, #map_canvas {
 height: 100%;
}

@media print {
 html, body {
   height: auto;
 }

 #map-canvas, #map_canvas {
   height: 650px;
 }
}

#panel {
 /*position: absolute;
 left: 50%;
  margin-left: -180px; */
 top: 5px;
 float:left;
 width:30%;
 z-index: 5;
 background-color: #fff;
 padding: 5px;
 border: 1px solid #999;
}
   </style>

   <script>
var num=1;
var infowindow = new google.maps.InfoWindow();
var map=null;
var autoobj=[];
var markerobj=[];
var bounds = new google.maps.LatLngBounds ();
function initialize() {
 var mapOptions = {
   center: new google.maps.LatLng(-33.8688, 151.2195),
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);

 var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField1'));
 var autocomplete = new google.maps.places.Autocomplete(input);
 autoobj[num]=autocomplete;
 //autocomplete.bindTo('bounds', map);




 // Sets a listener on a radio button to change the filter type on Places
 // Autocomplete.
 function setupClickListener(id, types) {
   var radioButton = document.getElementById(id);
   google.maps.event.addDomListener(radioButton, 'click', function() {
     autocomplete.setTypes(types);
   });
 }

 //setupClickListener('changetype-all', []);
 //setupClickListener('changetype-establishment', ['establishment']);
 //setupClickListener('changetype-geocode', ['geocode']);
}

google.maps.event.addDomListener(window, 'load', initialize);
function createMarker(n)
{
   infowindow.close();
if(markerobj[n])
{
 markerobj[n].setMap(null);
}
var marker = new google.maps.Marker({ map: map });
markerobj[n]=marker;
   marker.setVisible(false);
var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'+n));
  // var autoc = new google.maps.places.Autocomplete(input);
   var autoc=autoobj[n];
   input.className = '';
   var place = autoc.getPlace();
if(!place)
{
alert('Please select location first');
return false;
}
   if (!place.geometry) {
     // Inform the user that the place was not found and return.
     input.className = 'notfound';
     return;
   }

   // If the place has a geometry, then present it on a map.
   if (place.geometry.viewport) {
     map.fitBounds(place.geometry.viewport);
   } else {
     map.setCenter(place.geometry.location);
     map.setZoom(17);  // Why 17? Because it looks good.
   }
var icon=place.icon;
var enteredicon=document.getElementById('imagelink'+n).value;
if(enteredicon!="")
{
icon=enteredicon;
}
   marker.setIcon(/** @type {google.maps.Icon} */({
     url: icon,
     size: new google.maps.Size(71, 71),
     origin: new google.maps.Point(0, 0),
     anchor: new google.maps.Point(17, 34),
     scaledSize: new google.maps.Size(35, 35)
   }));
   marker.setPosition(place.geometry.location);
   marker.setVisible(true);
   //bounds.extend (place.geometry.location);
   var address = '';
   if (place.address_components) {
     address = [
       (place.address_components[0] && place.address_components[0].short_name || ''),
       (place.address_components[1] && place.address_components[1].short_name || ''),
       (place.address_components[2] && place.address_components[2].short_name || '')
     ].join(' ');
   }
   //map.fitBounds (bounds);
   infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
   infowindow.open(map, marker);
setZoommap();
}

function AddNewLocation()
{
      num=num+1;
      var frag = document.createDocumentFragment(),
       temp = document.createElement('div');
temp.style='border-bottom:1px solid grey;padding:2px;width:100%;';
       temp.innerHTML = '<label for="Location" style="width:100%;float:left;">Location</label><input id="searchTextField'+num+'" type="text" size="50"> <label for="Location" style="width:100%;float:left;margin-top:5px;">Image Link</label><input id="imagelink'+num+'" type="text" size="50" placeholder="Enter image path"><div style="text-align:right;margin-top:5px;"><input id="showmap1" type="button" value="Show Marker" onclick="createMarker('+num+');"></div>';
     var child = document.getElementById('newloc');
     child.parentNode.insertBefore(temp, child);
var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'+num));
var autocomplete = new google.maps.places.Autocomplete(input);
autoobj[num]=autocomplete;
}
function setZoommap()
{
   var bounds = new google.maps.LatLngBounds ();
  for(var k=1;k<markerobj.length;k++)
  {
  bounds.extend (markerobj[k].getPosition());
  }
  map.fitBounds (bounds);
}
 </script>
 </head>
 <body>
   <div id="panel">
 <div style="border-bottom:1px solid grey;padding:2px;width:100%;">
 <label for="Location" style="width:100%;float:left;">Location</label>
     <input id="searchTextField1" type="text" size="50">
 <label for="Location" style="width:100%;float:left;margin-top:5px;">Image Link</label>
     <input id="imagelink1" type="text" size="50" placeholder="Enter image path">
 <div style="text-align:right;margin-top:5px;"><input id="showmap1" type="button" value="Show Marker" onclick="createMarker(1);"></div>
     <!--<input type="radio" name="type" id="changetype-all" checked="checked">
     <label for="changetype-all">All</label>

     <input type="radio" name="type" id="changetype-establishment">
     <label for="changetype-establishment">Establishments</label>

     <input type="radio" name="type" id="changetype-geocode">
     <label for="changetype-geocode">Geocodes</label>-->
 </div>
 <div style="margin-top:5px;width:100%;text-align:right;" id="newloc"><input id="button" type="button" value="Add location" onclick="AddNewLocation();"></div>
   </div>

   <div id="map-canvas"></div>
 </body>
</html>

No comments:

Post a Comment

Printing first 50 Fibonacci numbers Using PHP Program

Fibonacci series is a series of numbers in which each number is the sum of the two preceding numbers. For example. 0 , 1 , 1 , 2 , 3 , 5...