Here you can find the code please click below
<!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