I'm trying to get my map to re-orient to a new center when a user
chooses a district within the main map from a dropdown menu. See the
map here: http://bilware.net/BullyMap/BullyMap.html
I can get the zoom to change using map.setZoom (although it's
commented out below). But map.setCenter won't work. I thought it was
because I wasn't calling LatLng parameters correctly, but discovered
it won't work even if I plug in fixed parameters, as I think I've done
below.
I'm very new to this; any help is appreciated.
function changeMap() {
var selected_bully_table = $('#map_menu').val();
var searchString = document.getElementById('searchString').value.replace("'", "\\'");
if(searchString == "") {
layer.setQuery("SELECT 'geometry' FROM " + selected_bully_table);
return;
}
layer.setQuery("SELECT 'geometry' FROM " + selected_bully_table + " WHERE 'SDNAME' = '" + searchString + "'");
// Now zoom and center the map
{
map.setZoom(9);
myLatLng=(-91.9240850749,47.9119132072);
map.setCenter(myLatLng);
}
}
Replace
myLatLng=(-91.9240850749,47.9119132072);
with
myLatLng= new google.maps.LatLng(-91.9240850749,47.9119132072);
your latitude value should be between -90 degrees and +90 degrees and also you should pass a new instance of google.maps.LatLng class to the setCenter function.
A combination of the two other answers will give you your real answer.
The reason doing
myLatLng= new google.maps.LatLng(-91.9240850749,47.9119132072);
gives you a gray screen is because the position is outside of the bounds of the map. If you zoom out and scroll the map upwards you will see this :)
What you need to do is write
map.setZoom(9);
myLatLng = new google.maps.LatLng(LATITUDE,LONGITUDE);
map.setCenter(myLatLng);
and pass values of LATITUDE & LONGITUDE that are within the bounds of the map like (51, 0).
Related
I am trying to display latitude and longitude coordinates on a map. This works fine but once this is displayed I also want to display the users current location on the same map while displaying the other position as well. Could someone please tell me how that is done. This is what I use to display the Lat and Longitude.
function showPosition()
{
//var latlon=position.coords.latitude+","+position.coords.longitude;
var lat = document.getElementById("saved_lat").value;
var lon = document.getElementById("saved_lon").value;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+ lat + "," + lon +"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
First, you will need to get the user's current lat/lng position. Then you will need to use the 'markers' parameter in the static map to show two markers, one for the saved position and one for the user's position.
You can get a description on how to use markers here:
https://developers.google.com/maps/documentation/staticmaps/?csw=1#MarkerLocations
Below is a working modification of your code. Here's some tips:
I hardwired the saved_lat/lon values in the statements for demo'ing purposes. You will need to replace these or use your own HTML code.
The user's coordinate are obtained form the HTML geolocation method navigator.geolocation. This method will pass the lat/lon of the user's location to the ShowPosition() function.
I updated your ShowPosition() function:
A. Take the user's lat/lon as parameters
B. Added variable 'markers' to set two markers (saved and user's) in the google static map.
C. Added variable 'zoom' to set the zoom level.
<script>
// Get User's Coordinate from their Browser
window.onload = function () {
// HTML5/W3C Geolocation
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition( UserLocation );
// Default to Washington, DC
else
ShowPosition( 38.8951, -77.0367 );
}
// Callback function for asynchronous call to HTML5 geolocation
function UserLocation( position )
{
ShowPosition( position.coords.latitude, position.coords.longitude );
}
function ShowPosition( user_lat, user_lon )
{
var lat = document.getElementById("saved_lat").value;
var lon = document.getElementById("saved_lon").value;
var markers = "&markers=color:blue|label:S|" + lat + "," + lon + "|" + user_lat + "," + user_lon;
var zoom="&zoom=11";
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+ lat + "," + lon +"&size=400x300&sensor=false" + zoom + markers;
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
</script>
<body>
<div id="mapholder"></div>
<input type="hidden" id="saved_lat" value="45.65"/>
<input type="hidden" id="saved_lon" value="-122.45"/>
</body>
I want to open a Google Maps InfoWindow based on whether or not one of my buildings is throwing a building alarm. The buildings I have the markers on all have alarm states (on or off), and if they are in alarm state, I am changing the color of the marker to yellow or red, depending on the severity of the alarm. When the alarms are "red" alarms, the marker is animated with the google.maps.Animation.BOUNCE effect.
The bounce effect is sometimes not enough to garner attention (we leave this screen open on a wall, and the data in the $(this).children(".alarm-count") div below changes dynamically due to another script we have running on the site in the background.
I already know how to change the markers based on the alarm state, can I also open an InfoWindow within the same condition? I have tried this:
google.maps.event.addListener(map,'idle',(function(marker,i){
return function(){
infowindow.setContent(
'<div class="infowindow-inner">'+
'<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
'<h2>'+bldgName[i]+'</h2>'+
'<h4>'+bldgAddr[i]+'</h4>'+
'<p>'+mainMeter[i]+' kW</p>'+
'<p>'+alarmCount[i]+' Alarms</p>'+
'</div>'
);infowindow.open(map,marker);
}
})(marker,i));
but it doesn't seem to be working.
The long and short of it is I need to evaluate one value per marker in my page, and open (or not open) the InfoWindow for each building based on that value.
Here is my code:
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html().slice(1);
bldgName[i] = $(this).children(".bldg-name").html();
bldgAddr[i] = $(this).children(".bldg-address").html();
bldgGfx[i] = $(this).children(".bldg-graphic").html();
mainMeter[i] = $(this).children(".main-meter").html();
alarmCount[i] = $(this).children(".alarm-count").html();
latitude[i] = $(this).children(".latitude").html();
longitude[i] = $(this).children(".longitude").html();
if (alarmCount[i]!="N/A"){alarmCount[i]=alarmCount[i].slice(0,-3);}
if (alarmCount[i]>"0" && alarmCount[i]!="N/A"){
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);
////
//// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
////
}
else if ($(this).hasClass("new")||(mainMeter[i]=="N/A")||(!isNumber(mainMeter[i]))) {
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:yellowIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}
else {
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:greenIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent(
'<div class="infowindow-inner">'+
'<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
'<h2>'+bldgName[i]+'</h2>'+
'<h4>'+bldgAddr[i]+'</h4>'+
'<p>'+mainMeter[i]+' kW</p>'+
'<p>'+alarmCount[i]+' Alarms</p>'+
'</div>'
);infowindow.open(map,marker);
}
})(marker,i));
i++;
});
Since many buildings may be "on alert", you'll want a InfoWindow array (in my demo it's a global because I use an inline call); however, the screen may get cluttered very easily. I wrote a Z-Index routine to bring a clicked InfoWindow to front. You might also want to consider MarkerWithLabel or InfoBubble because in my opinion they look better than the vanilla InfoWindow.
Please see the demo
demo side-by-side with code
I'll only copy some of the parts that are very different.
var infowindows = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// MANY LINES SKIPPED
// ...
$(this).children(".longitude").html();
infowindows[i] = new google.maps.InfoWindow({
content:'<div class="infowindow"
onclick="bringToFront('+i+')">'+bldgName[i]+'</div>'});
if (alarmCount[i]>0 && alarmCount[i]!="N/A"){
// marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);
marker = new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,title:"red"});
infowindows[i].open(map,marker);
//// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
}
...
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindows[i].open(map,marker);
bringToFront(i);
}
})(marker,i));
});
}
function bringToFront(windowIndex) {
console.log(windowIndex);
for (var i = infowindows.length-1, n = 0; i >= n; i--) {
infowindows[i].setZIndex(0);
}
infowindows[windowIndex].setZIndex(1);
}
If you zoom a google map out the world will start to repeat horizontally. Using .getBounds() seems to return the longitude at the edges of the displayed map image. But I would like to get minimum and maximum longitudes for the current view of the real world.
For example in this image .getBounds() says that the longitude ranges between 116 and 37 degrees (giving a width of -79 degrees!). The range I'm looking for is -244 to +37.
(or even -180 to +37 as this is the extremes of the world that is viewable around the map centre.)
And another example. Here I'm looking for -180 to +180 ...
You can try it for yourself here...
http://jsfiddle.net/spiderplant0/EBNYT/
(Apologies if this has been answered before - I did find some old similar questions but none seemed to have satisfactory answers).
I ran into the same issues today, but I think I finally figured it out.
In the first scenario above, you can use map.getBounds().toSpan() to get the width in longitude.....as long as the map did not wrap around.
For the second scenario where the map wraps around, I extended the google.maps.OverlayView() to get the google.maps.MapCanvasProjection object. From there you can call the function getWorldWidth().
It will give you the world width in pixel, then you can compare it with your map container's width. If your container is bigger, your map has wrapped around.
Don't know if the function is meant for this but it works.
The answer proposed by user1292293 worked for me (Google map api V3)
Extension of google.maps.OverlayView()
function MyMapOverlay() {}
MyMapOverlay.prototype = new google.maps.OverlayView();
MyMapOverlay.prototype.onAdd = function() {};
MyMapOverlay.prototype.draw = function() {};
MyMapOverlay.prototype.onRemove = function() {};
Add overlay to the map
var map = new google.maps.Map(domContainer, {...});
var overlay = new MyMapOverlay();
overlay.setMap(map);
check if map wraps around:
var proj = overlay.getProjection();
var wwidth = 0;
if (proj) wwidth = proj.getWorldWidth();
var mapsWrapsAround=false;
if (__wwidth > 0 && __wwidth < domContainer.width()) mapsWrapsAround = true;
I used the answer from rebpp to prevent the map from wrapping by setting the getWorldWidth. Here's the MapWrappingPrevent I created.
To use this just call
var wrapPreventer = new MapWrappingPrevent(_map);
/* This class prevents wrapping of a map by adjusting the max-width */
function MapWrappingPrevent(map) {
var self = this;
this.setMap(map);
map.addListener('zoom_changed', function () {
self.onZoomChanged();
});
}
MapWrappingPrevent.prototype = new google.maps.OverlayView();
MapWrappingPrevent.prototype.onAdd = function () { this.onZoomChanged(); };
MapWrappingPrevent.prototype.draw = function () { };
MapWrappingPrevent.prototype.onRemove = function () { };
MapWrappingPrevent.prototype.onZoomChanged = function () {
var proj = this.getProjection();
if (proj) {
var wrappingWidth = proj.getWorldWidth();
$(this.getMap().getDiv()).css({'max-width': wrappingWidth + 'px'})
}
};
I'm trying to get specific variables out of a for each loop. These variables are used to display a click event on a marker on a map. If you click the marker on the map, the details pop over it. Now these details are being overwritten each time the loop starts (50 times). The solution I'm looking for, let's me select a marker on the map with the according detail attached to it.
There might be an easy solution but I haven't found it yet.
The code :
for each(artistXML in artistList.events.event)
{
var gLat:int = artistXML.venue.location.*::point.*::lat;
var gLong:int = artistXML.venue.location.*::point.*::long;
var evntLng:LatLng = new LatLng(gLat,gLong);
var title:String = artistXML.title;
var wanneer:String = artistXML.startDate;
var waar:String = artistXML.venue.location.city;
var pic:String = artistXML.venue.image.(#size=="medium");
var marker:Marker = new Marker(new LatLng(gLat, gLong));
var info:InfoWindowOptions = new InfoWindowOptions();
marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
var marker:Marker = event.target as Marker;
marker.openInfoWindow(new InfoWindowOptions({contentHTML: "<p><b>" + title + "</b></p><br/><p>" + wanneer + "</p> <br/> <p>" + waar + "</p>"}));
});
map.addOverlay(marker);
Goverlay++;
}
Thanks
You need to store a reference to the values somewhere before you start the next loop.
I'm not sure what the structure of your Marker and InfoWindowOptions classes are, so there might be a better way, but here's a naive solution:
Create 2 arrays called mapMarkers and infoWindows. For each loop push the new Marker and the new InfoWindowOptions instances into the appropriate arrays. You'll need to set those variables on the InfoWindowOptions too. Then in your click handler you can lookup the index of the Marker that was clicked (mapMarkers.indexOf(marker)) and use that index to get the corresponding InfoWindowOptions.
I am looking to find a way of checking if a point exists inside a polygon in Google Maps v3 (JavaScript). I've searched everywhere and the only solutions I have found so far have been to do with getting the bounds of the polygon, but the code shown seems to just create a rectangle and keeps expanding its surface area to include all relevant points.
By the way, the reason I can't just use a big square i.e. getting a polygons bounds, is that I have bordering polygons on the map and they can not expand into each other's territory.
EDIT
Following on from the reply below, I have tried implementing the example code using one of my existing polygons but it is just saying that it is not defined and I can't figure out why.
Here is my declaration:
myCoordinates = [
new google.maps.LatLng(0.457301,-0.597382),
new google.maps.LatLng(0.475153,-0.569916),
new google.maps.LatLng(0.494379,-0.563049),
new google.maps.LatLng(0.506738,-0.553436),
new google.maps.LatLng(0.520470,-0.541077),
new google.maps.LatLng(0.531456,-0.536957),
new google.maps.LatLng(0.556174,-0.552063),
new google.maps.LatLng(0.536949,-0.596008),
new google.maps.LatLng(0.503991,-0.612488),
new google.maps.LatLng(0.473780,-0.612488) ];
polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.6 };
var rightShoulderFront = new google.maps.Polygon(polyOptions);
rightShoulderFront.setMap(map);
and here is where I am checking for the point:
var coordinate = selectedmarker.getPosition();
var isWithinPolygon = rightShoulderFront.containsLatLng(coordinate);
console.log(isWithinPolygon);
But it keeps coming up with the error: Uncaught ReferenceError: rightShoulderFront is not defined
One algorithm to solve this is ray-casting. See an explanation here.
And you can find code implementing this for the Google Maps JS API V3 here.
HTH.
You can do this quite simply with Google maps geometry library.
First be sure to add the google maps geometry library.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
Then, define your polygon
var rightShoulderFront = new google.maps.Polygon({
paths: myCoordinates
});
rightShoulderFront .setMap(map);
I'm going to add an event listener to handle a 'click' event, but you can adapt to fit your needs
google.maps.event.addListener(rightShoulderFront , 'click', isWithinPoly);
Create a function to handle our click event an check if coordinate exists within polygon using Google's geometry library
/** #this {google.maps.Polygon} */
function isWithinPoly(event){
var isWithinPolygon = google.maps.geometry.poly.containsLocation(event.latLng, this);
console.log(isWithinPolygon);
}
You have a very good example of containsLocation() method in Google Maps API documentation.
You should have a look about the Gmaps.js library. It has a quite simple method about geofence.
var coordinate = new google.maps.LatLng(0.457301,-0.597382);//replace with your lat and lng values
var isWithinPolygon = google.maps.geometry.poly.containsLocation(coordinate, yourPolygon);
Dont forget to include the library in your googleapis script. Read more...
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
The example and implementation do not take into account that a polygon can cross the 180 degrees boundary.
The implementation does take it into account (implicitly) in the bounding box check, but the polygon check fails.
I have used the same thing and working fine and its offline code I have written this code in PHP you can write it any programming language.
class pointLocation {
var $pointOnVertex = true; // Check if the point sits exactly on one of the vertices?
function pointLocation() {
}
function pointInPolygon($point, $polygon, $pointOnVertex = true) {
$this->pointOnVertex = $pointOnVertex;
// Transform string coordinates into arrays with x and y values
$point = $this->pointStringToCoordinates($point);
$vertices = array();
foreach ($polygon as $vertex) {
$vertices[] = $this->pointStringToCoordinates($vertex);
}
// Check if the point sits exactly on a vertex
if ($this->pointOnVertex == true and $this->pointOnVertex($point, $vertices) == true) {
return "vertex";
}
// Check if the point is inside the polygon or on the boundary
$intersections = 0;
$vertices_count = count($vertices);
for ($i=1; $i < $vertices_count; $i++) {
$vertex1 = $vertices[$i-1];
$vertex2 = $vertices[$i];
if ($vertex1['y'] == $vertex2['y'] and $vertex1['y'] == $point['y'] and $point['x'] > min($vertex1['x'], $vertex2['x']) and $point['x'] < max($vertex1['x'], $vertex2['x'])) { // Check if point is on an horizontal polygon boundary
return "boundary";
}
if ($point['y'] > min($vertex1['y'], $vertex2['y']) and $point['y'] <= max($vertex1['y'], $vertex2['y']) and $point['x'] <= max($vertex1['x'], $vertex2['x']) and $vertex1['y'] != $vertex2['y']) {
$xinters = ($point['y'] - $vertex1['y']) * ($vertex2['x'] - $vertex1['x']) / ($vertex2['y'] - $vertex1['y']) + $vertex1['x'];
if ($xinters == $point['x']) { // Check if point is on the polygon boundary (other than horizontal)
return "boundary";
}
if ($vertex1['x'] == $vertex2['x'] || $point['x'] <= $xinters) {
$intersections++;
}
}
}
// If the number of edges we passed through is odd, then it's in the polygon.
if ($intersections % 2 != 0) {
return "inside";
} else {
return "outside";
}
}
function pointOnVertex($point, $vertices) {
foreach($vertices as $vertex) {
if ($point == $vertex) {
return true;
}
}
}
function pointStringToCoordinates($pointString) {
$coordinates = explode(" ", $pointString);
return array("x" => $coordinates[0], "y" => $coordinates[1]);
}
}
$pointLocation = new pointLocation();
$points = array("22.732965336387213 75.8609390258789");
$polygon = array("22.73549852921309 75.85424423217773","22.72346544538196 75.85561752319336","22.72346544538196 75.87175369262695","22.732332030848273 75.87295532226562","22.740406456758326 75.8686637878418","22.74198962160603 75.85407257080078");
echo '<pre>';
print_r($polygon);
// The last point's coordinates must be the same as the first one's, to "close the loop"
foreach($points as $key => $point) {
echo "point " . ($key+1) . " ($point): " . $pointLocation->pointInPolygon($point, $polygon) . "<br>";
}
?>
I think google has solved it with this method of containsLocation()
https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation