I created a google maps polyline
var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "rgba(255,0,0, .5)",
strokeOpacity: 1.0,
strokeWeight: 4
});
and I created an event (click for example) which displays a box with information. Sample code:
google.maps.event.addListener(flightPath, 'click', function(el) {
var curLat = el.latLng.lat();
var curLng = el.latLng.lng();
var myLatlng = new google.maps.LatLng(curLat,curLng);
infowindow.content = "<div style= ' width: 200px'>STRING HERE<div>";
infowindow.setPosition(myLatlng);
infowindow.open(map);
});
I've defined the infowindow globally so I can re-position it.
The problem now is that wherever I click it always displays the same information. Basically what I want to do is to get the line number clicked (starting form 0, 1 ..) and I can use it to get the appropriate data.
This information is not available via the API.
It would be possible to use the geometryy-library(isLocationOnEdge) and iterate over the single lines to detect on which line the click occurs, but I think it's easier to use single Polylines for each segment:
var flightPlanCoordinates = [
new google.maps.LatLng(-27.46758, 153.027892),
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(29.46758, 88.027892),
new google.maps.LatLng(20.46758, 97.027892),
new google.maps.LatLng(17.772323, 78.214897)
],i=0,infowindow=new google.maps.InfoWindow;
while(flightPlanCoordinates.length>1){
(function(i){
var segment= new google.maps.Polyline({
path: [flightPlanCoordinates.shift(),flightPlanCoordinates[0]],
strokeColor: "rgba(255,0,0, .5)",
strokeOpacity: 1.0,
strokeWeight: 4,
map:map
});
google.maps.event.addListener(segment, 'click', function(e){
infowindow.setOptions({map:map,position:e.latLng,content:'Line#'+i});
});
})(i++)
}
Related
We get 4 latitude and 4 longitude.We drag line between points using Polyline
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates2,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
We Add Image on points like this
var image ='../images/shopimageformapsyellow.png';
var marker = new google.maps.Marker({
position:mapCenter,
map: map,
icon: image
});
Working fine But 4 points have one image like yellow color image.We need Start and Ended point redcolor image and remaining Yellow color image.Please guide me any one how to place first point and last point have different image
We tried like this
var icons1 = {
start: new google.maps.MarkerImage('../images/startRed.png'),
end: new google.maps.MarkerImage('../images/startGreen.png')
};
flightPath = new google.maps.Polyline({
icons: [{
icon: icons1,
}],
path: flightPlanCoordinates2,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
flightPath.setMap(map);
But we don't have luck Please any one guide me
I would recommend you to use Leaflet which is a open source Javascript library for Mobile Friendly interactive maps.
With that you can have custom image for markers and also alternative colors for marker images.
Please refer to the following link for more details.
Hope that Helps!!
I am using the Google Maps JavaScript API to create a heatmap layer. I would like to add mouseover events to 100+ locations on the map that will display an infowindow. This would get pretty cluttered if I used markers for every event, so I was hoping to find a way to eliminate markers altogether (although I did throw together an ugly mess of a solution in which a button will show/hide those markers). My first thought was to use the LatLngBounds. As a simple example:
var infowindow = new google.maps.InfoWindow(
{ content: "some info",
size: new google.maps.Size(50,50)
});
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
google.maps.event.addListener(loc, 'mouseover', function() {
infowindow.open(map);
});
google.maps.event.addListener(loc, 'mouseout', function() {
infowindow.close();
});
For whatever reason, though, the mouseover event never seems to happen. Is there a problem with the code? Is there a better way to do this than by using LatLngBounds?
First of all, you should make a new rectangle with your bounds:
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
var rectangle = new google.maps.Rectangle({
bounds: loc,
editable: false,
draggable: false,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
rectangle.setMap(map);
And then just use an event listener on that rectangle
google.maps.event.addListener(rectangle, 'mouseover', openInfoWindow);
function openInfoWindow(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var content = 'Infowindow content';
// Set the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(ne);
infoWindow.open(map);
}
I have the following javascript code in rails 3.2.
function initialize() {
var myLatLng = new google.maps.LatLng(34.553366482, 49.783977595);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(34.553366482, 49.783977595),
new google.maps.LatLng(34.554122088, 49.783895487),
new google.maps.LatLng(34.554483305, 49.783853715),
new google.maps.LatLng(34.555332372, 49.783720553),
new google.maps.LatLng(34.556189752, 49.783658072),
new google.maps.LatLng(34.556664709, 49.783605137),
new google.maps.LatLng(34.556769403, 49.783602219),
new google.maps.LatLng(34.556787772, 49.783469404),
new google.maps.LatLng(34.556793727, 49.783317126),
new google.maps.LatLng(34.555050604, 49.783479752),
new google.maps.LatLng(34.554290633, 49.783555281),
new google.maps.LatLng(34.55376046, 49.783620191),
new google.maps.LatLng(34.553413552, 49.783659434),
new google.maps.LatLng(34.553275583, 49.783705246),
new google.maps.LatLng(34.553366482, 49.783977595),
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
this is a way o show points on the google maps. I wanna get the points from database and send to javascript. how can i do that in a loop?
You could create a javascript variable(json to be more specific) in one of your rails views so that it is available to your script above.
In controller/model:
#coordinates = Coordinates(..your query...).get_json
In your view where these points are going to show, depending or whether you use erb or haml, do:
Haml:
:javascript
var coords = "#{#coordinates.to_json}"
Erb:
<script type="text/javascript">
var coords = "<%= escape_javascript(#coordinates.to_json)%>"
</script>
Now you can iterate over the coords json in your flightPlanCoordinates above and make the markers.
aI know that this one is repeated question,
I am using google map v3 on my Django web based applicaiton. Where i am using Markers, Infowindow and polyline. Everything works fine, except the one when i click on a marker to show the content by Info window, the previous opened info window didn't closed.
I am posting the my map code(only the script part or which are the useful):
var marker = add_marker(flightPlanCoordinates[i][0], flightPlanCoordinates[i][1],"Event Detail",myHtml);
Here myHtml is a variable which contains the Info window content. I didn't define the variable here. SO ignore it.
marker.setMap(map);
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinatesSet,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
return marker;
}
Instead of multiple infoWindows use only one instance.
When clicking on a marker, first close the infoWindow, then set the new content and open the infoWindow.
function add_marker(lat,lng,title,box_html)
{
//create the global instance of infoWindow
if(!window.infowindow)
{
window.infowindow=new google.maps.InfoWindow();
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(box_html);
infowindow.open(map,this)
});
return marker;
}
i tried to built up a little Google Maps api in PHP which fetches Circles and Infowindows from a Database.
Anything works besides closing an InfoWindow after opening it.
The Chrome Developer console throws out the following errors:
GET http://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i151368577549307460&2i99567197161272770&2e2&3u50&4m2&1u512&2u496&5m3&1e2&2b1&5sde-DE&token=119415 404 (Not Found) main.js:33 <- Onload
And on clicking on the Red popup it shows the following error:
Uncaught TypeError: Object # has no method 'O'
Tried to figure out a solution for hours now, hope you can help me!
Thank you!
<script type='text/javascript'>
var _infoWindow = new Array();var _marker = new Array();
function initialize() {
var mapOptions = {
zoom: 50,
center: new google.maps.LatLng(48.52039, 9.05949),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var circles = [{"color":"fff","center":new google.maps.LatLng(48.5204, 9.05949),"radius":200}];
for(var circle in circles) {
new google.maps.Circle({
strokeColor: circles[circle].color,
strokeOpacity: 1,
strokeWeight: 2,
fillColor: circles[circle].color,
fillOpacity: 0.35,
map: map,
center: circles[circle].center,
radius: circles[circle].radius
});
}
var infoWindows = [{"center":new google.maps.LatLng(48.5204, 9.05949),"content":"<h2>Juhu!<\/h2>Html<br>Content <b>erlaubt<\/b>!"}];
var i = 0;
for(var infoWindow in infoWindows) {
_infoWindow[i] = new google.maps.InfoWindow({
content: infoWindows[infoWindow].content
});
_marker[i] = new google.maps.Marker({
position: infoWindows[infoWindow].center,
map: map,
title:'Test'
});
google.maps.event.addListener(_marker[i], 'click', new Function('_infoWindow['+i+'].open(map,_marker['+i+']);'));
i++;
}
}
window.onload = function(){
initialize();
}
</script>
</head>
<body>
<div id='map' style='height:500px;width:500px;'></div>
</body>
You are defining the map-variable inside a local scope(initialize), it will not be accessible inside the click-handler.
Add this to the top of the scripts:
var map;
And remove the var-keyword from this line:
var map = new google.maps.Map(document.getElementById('map'), mapOptions);