This is the code for generating map with a kml file
var myLatlng = new google.maps.LatLng(47.711516,-117.395075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
var geoLayer = new google.maps.KmlLayer(
'http://some.kml.url/kmllayer.kml',
{suppressInfoWindows: true,map: map});
geoLayer.setMap(map);
My problem is its always getting at max distance, zoom settings not working even if i try to map.setCenter() call, its still same.
Another question is when i draw polygons on map, is there any way to highlight inside color of it when someone mouse overs it.
2nd question. Draw an initial polygon with a fill opacity of 0 but stroke opacity of 1. Have two event listeners attached to the polygon, for mouseover and mouseout.
google.maps.event.addListener(polygon, 'mouseover', function() {
polygon.setOptions({fillOpacity:0.5});
}
google.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({fillOpacity:0.0});
}
Related
I'm using Wordpress. I want to change default zoom level on google maps API. I edited "zoom: 5" property, but nothing happens. Function:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById("map-canvas"),
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng( -5.796453, -35.206706),
new google.maps.LatLng( -5.796453, -35.206706));
map.fitBounds(defaultBounds);
(...)
map.fitbounds resets the viewport and ignores the zoom property you set. I found this fiddle that simulates the map.fitbounds function but where the zoom isn't ignored: https://jsfiddle.net/pdnsown1/2/
I am having problems using Google Map API.
I want to plot circles on the map and create mouseover event on each circle to open an infowindow displaying the time value.
First problem is the infowindow content does not change for different circles.
Second problem is infowindow does not pop up for some reason.
Can someone help please?
Thanks
Codes are as followings:
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
// Construct the circle for each value in citymap. We scale population by 20.
//movingColour=ColorLuminance(movingColour, -0.005) ;
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
var infowindow =new google.maps.InfoWindow({
content: data[city].time
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
alert(infowindow.content);
infowindow.open(map,circle);
});
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
This is a common problem usually seen with InfoWindows on markers and can be solved a number of ways. The InfoWindow isn't opening because the optional second parameter of .open can only be a marker, without that, you need to set the position at which the marker should open. I usually use function closure to solve the InfoWindow content problem (there are other ways):
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
createClickableCircle(map, circle, data[city].time);
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
function createClickableCircle(map, circle, info){
var infowindow =new google.maps.InfoWindow({
content: info
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
// alert(infowindow.content);
infowindow.setPosition(circle.getCenter());
infowindow.open(map);
});
}
(you probably want to add a listener to close the InfoWindow.)
I rewrite a bit of your javascript to have better syntax and named variables which you had forgotten to define with var.
For example to define data={}; use var data=[]; since I can see below that you use it as an array containing objects. I also made a fix which stops flickering effect when you are moving your cursor over circles which has infowindow already opened:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
Other enhancements includes defining few of your variables as global above your initialize(); method, cheers.
Check out working fiddle with comments.
I have one question,
why dose mouse events related to a map never fire when we are over marker
exp. having a mouse move listener added to a map is never called when we move over a marker
(there is not so called event propagation or bubbling).
This was actully working on maps v2!
Is it a bug, or its changed to this behavior in v3?
Blaze
Here is the example...
If you move around the map, the mapLabel is updated as should be
but if u move over the marker the mapLabel is never updated
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'MOUSEMOVE', function() {
document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random();
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'MOUSEOUT', function() {
document.getElementByID('markerLabel').innerHtml = '';
});
google.maps.event.addListener(marker, 'MOUSEOVER', function() {
document.getElementByID('markerLabel').innerHtml = 'Mouse over marker';
});
}
All google maps' data that is drawn placed on 7 layers. These layers are called Panes. According to what pane the drawing belongs , it can receive or not receive events. For more information look at the google.maps.MapPanes documentation.
UPDATE: Google maps draws all data on 7 panes. All panes are children of the same parent. For event bubbling it is neccessary that the relation of elements should be parent-child ( then child can bubble the event to parent ),but not sibling-sibling. In sibling-sibling relation, event is received by element with the highest z-index. This is the reason you don't get events bubbled from marker's pane to map's pane.
I am using google map API V3. i want to use a custom marker instead of that red marker. Earlier the code was
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if(display_marker) {
// create a map marker
var marker = new google.maps.Marker({
map: map,
position: latlng
});
}
but for the custom marker, i changed the code to
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// create a map marker
var image = 'imgs/pin.png';
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image
});
but yet this is not working.
The image path is likely incorrect but,
You could also eliminate var image and just define the icon under var marker depending on your situation.
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: 'imgs/pin.png',
});
Your code looks okay.
Perhaps the image path is off.
Try putting the pin.png in the same folder as the map and then changing the
var image = 'imgs/pin.png';
to
var image = 'pin.png';
If it works, then you need to revise the path, probably to something like
var image = '/imgs/pin.png';
or
var image = '../imgs/pin.png';
I have a question relevant to Google Maps API. I am learning how to use the Google Maps API. I can just show the map in the div tag, but what I want is to be able to click on the map and show the marker and return the LatLng of the clicked point.
function initialize(v_lat,v_long,v_place) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map( document.getElementById("map_canvas") , myOptions );
}
here is the click event example
where you click on map marker place on that point and click on marker which will return the latlng of that location.
try this
var marker;
google.maps.event.addListener(map, 'click', function() {
if(marker==null){
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
alert("latlng" + marker.getPosition());
});
}
});
here is the link for google map v3 you can find all tutorials related to the map
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/events.html