I want to display zip code boundaries and on that boundaries i want to display custom polygon on that
here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables styling</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map, layer;
var tableid = 2996349;
var triangleCoords = [
new google.maps.LatLng(37.2684,-119.956),
new google.maps.LatLng(37.5137,-119.958),
new google.maps.LatLng(37.417, -120.149),
new google.maps.LatLng(37.3957, -119.745)
];
var bermudaTriangle;
function initialize() {
var usa=new google.maps.LatLng(37.23032838760389, -118.65234375);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center:usa,
zoom: 4
});
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'blue',
fillOpacity: 0.35
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>`
but it is showing only custom polygon not the boundaries can u share some sample code for displaying the same
Related
I want an infowindow to open automatically when this map is loaded. I'm trying to apply the very fine answer here, the only difference I can see being that I'm triggering a click on a marker rather than on a polygon. I've been staring at and fiddling with the code for a while but just can't get it to trigger that click. What am I missing?
Thanks,
Drew
This pared-down version is using a KML file with one placemark. The relevant code for the event.trigger is down at line 33.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDFrP7MSD1ieFEvaF95BRlwHa0S72Fy1s&sensor=FALSE"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions );
var blues = new geoXML3.parser({map: map, zoom: false});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function(){
alert("Clicking now.");
google.maps.event.trigger(geoXml.docs[0].placemarks[0].marker,'click')
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You have a javascript error in your code: Uncaught ReferenceError: geoXml is not defined (because geoXml is undefined). That should be blues in your code.
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var blues = new geoXML3.parser({
map: map,
zoom: false
});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function () {
alert("Clicking now.");
google.maps.event.trigger(blues.docs[0].placemarks[0].marker, 'click');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
Sorry for my English.
I want to know if it is possible to draw two or more different polylines on a map. For example, a polyline object from New York to Miami and other object from San Francisco to Los Angeles.
Can anyone give me an example.
Yes, of course.
<!DOCTYPE html>
<html>
<head>
<title>Draw two polylines</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var NYLatlng = new google.maps.LatLng(40.781321,-73.965855);
var MiamiLatlng = new google.maps.LatLng(25.786908,-80.226002);
var SFLatlng = new google.maps.LatLng(37.774514,-122.441311);
var LALatlng = new google.maps.LatLng(34.041281,-118.240585);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var line1 = new google.maps.Polyline({
path: [NYLatlng, MiamiLatlng],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
});
var line2 = new google.maps.Polyline({
path: [SFLatlng, LALatlng],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
});
// make the map zoomed in enough to see all the polylines
var bounds = new google.maps.LatLngBounds();
bounds.extend(NYLatlng);
bounds.extend(MiamiLatlng);
bounds.extend(SFLatlng);
bounds.extend(LALatlng);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I am using Google maps JavaScript API, i get users zip code from database, find lang, lat for it from another table, pass it to JavaScript and show marker on the map.this is showing marker perfectly.
But i want to show marker on exact address of the user instead of just zip code.
But unable to find a way how to do this.
Can anybody please guide me.
Thanks
if you want to place the marker on given lat and lng use this code,
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
I have following codes. It works perfectly in IE (GML and GeoJSON vector layer was loaded), but not in Firefox and Chrome without any errors noticed. Please help me to fix this problem.
Here is the code with GML vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
Here is the code with GeoJSON vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
format: new OpenLayers.Format.GeoJSON()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
I test a new drawing library and has led me to question how to get from drawing manager polyline position and set another markers? As in this example: polyline-complex.
My example:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(52.000, 16.000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
editable: true
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>