I am showing Infobox window when mouse over on Marker of Google Map, it's working.
But problem is that when i mouse over on Marker Google Map position is moving according to mouse over on Particular Marker.
I want to fix position of Google Map. Google Map will not moving according to Marker.
Code:
google.maps.event.addDomListener(window, 'load', function(){
var radius = null;
var i;
var markers_on_map = [];
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var markingposition = new google.maps.LatLng(26.9142853,75.7498689);
var bounds = new google.maps.LatLngBounds();
var mapoptions = {
zoom:14,
center: markingposition
};
var map = new google.maps.Map(document.getElementById('mapcan'), mapoptions);
var marker = new google.maps.Marker({
position: markingposition ,
animation: google.maps.Animation.DROP,
map: map
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("dvPanel"));
//all_locations is just a sample, you will probably load those from database
var all_locations = [
{type: "restaurant", name: "Restaurant 1", lat: 26.9128297, lng: 75.7495007},
{type: "school", name: "Kotak Mahindra Bank Ltd", lat: 26.9090936, lng: 75.7446262},
{type: "school", name: "Jagdamba Tower", lat: 26.9118107, lng: 75.7451139},
{type: "restaurant", name: "Water Tank", lat: 26.909608, lng: 75.749964},
{type: "school", name: "Shree Thal", lat: 26.9078141, lng: 75.7485584}
];
for(i=0; i<all_locations.length; i++)
{
var lat = all_locations[i]['lat'];
var long = all_locations[i]['lng'];
latlngset = new google.maps.LatLng(lat, long);
console.log(lat+'--'+long);
var marker = new google.maps.Marker({
position: latlngset,
map: map
});
marker.id = { name: all_locations[i]['name'] , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "01232434543" };
attachMessage(marker,latlngset);
map.setCenter(marker.getPosition());
}
/*
marker is a JavaScript object so i'll be taking that advantage and adding a custom attribute to the marker
object. this can be used to make dayanamic info window according to the values containing in the marker.id attribute
*/
marker.id = { name: "Precize Property" , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "01232434543" };
attachMessage(marker,markingposition);
// Create Cicle Around your location
var circle = new google.maps.Circle({
center: markingposition,
map: map,
radius: 1000, // IN METERS.
strokeColor: "#90bde5",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#55a6ed",
fillOpacity: .2,
});
$('#radius_km').change(function(event) {
radius = $(this).val();
console.log(radius);
var circle = new google.maps.Circle({
center: markingposition,
map: map,
radius: radius_km * 1000, // IN METERS.
strokeColor: "#90bde5",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#55a6ed",
fillOpacity: .2,
});
});
});
/*
creating an infobox object, most of the attributes are self explanatory, for more info about infobox options read
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
*/
infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
// top arrow in the info window
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.9,
width: "300px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", //close button icon
infoBoxClearance: new google.maps.Size(1, 1)
});
function attachMessage(marker,Latlng) {
//adding click listener to the marker
google.maps.event.addListener(marker, 'mouseover', function(evt) {
var newob = $(".inwrapper");
newob.find("#namexpopup").html(this.id.name);
newob.find("#addresspopup").html(this.id.address);
// newob.find("#callapopup").attr("href","tel:"+this.id.tel);
console.log(newob.html());
infobox.setContent(newob.html());
infobox.open(marker.get('map'), this);
marker.get('map').panTo(Latlng);
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
google.maps.event.addListener(marker, 'mouseout', function(evt) {
infobox.close();
});
}
function calcRoute(){
console.log('route');
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = '26.9142853,75.7498689';
var end = document.getElementById('start').value;
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
