Skip to content

Instantly share code, notes, and snippets.

@kwarkjes

kwarkjes/index.html

Created August 29, 2014 15:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kwarkjes/9162707265aa16029341 to your computer and use it in GitHub Desktop.
Save kwarkjes/9162707265aa16029341 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style id="jsbin-css">
#map {
height: 800px;
width: 1000px;
background: red;
}
</style>
</head>
<body>
<div id="map"></div>
<script id="jsbin-javascript">
//var postcodes = '
$(document).ready(function() {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=Kasteleinenkampweg+7,+De+Rietvelden,+5222+s-Hertogenbosch', function(data) {
console.log(data.results[0].geometry.bounds);
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
gmapsinitialize(lat,lng, data.results[0].geometry.bounds);
});
});
//Create Google Maps @ header image div
function gmapsinitialize(longitude, latitude, boundss) {
if ($('#map').length != 0) {
var myLatlng = new google.maps.LatLng(longitude, latitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
flat: true
});
var boundary = [
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.701271,
lng: 5.28132
},
{
lat: 51.704764,
lng: 5.280125
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.704539,
lng: 5.282443
},
{
lat: 51.707806,
lng: 5.274349
},
{
lat: 51.701956,
lng: 5.290792
},
{
lat: 51.703097,
lng: 5.274672
},
{
lat: 51.705595,
lng: 5.273214
},
{
lat: 51.697299,
lng: 5.283693
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.701211,
lng: 5.274684
},
{
lat: 51.705812,
lng: 5.263983
},
{
lat: 51.69876,
lng: 5.268637
},
{
lat: 51.705255,
lng: 5.268066
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.702493,
lng: 5.269131
},
{
lat: 51.70376,
lng: 5.27288
},
{
lat: 51.701205,
lng: 5.268009
},
{
lat: 51.69975,
lng: 5.27222
},
{
lat: 51.700057,
lng: 5.274391
},
{
lat: 51.694502,
lng: 5.280762
},
{
lat: 51.697159,
lng: 5.281374
},
{
lat: 51.695612,
lng: 5.282817
},
{
lat: 51.714832,
lng: 5.275447
},
{
lat: 51.709212,
lng: 5.267656
}
];
var latLngPOS = [];
$.each(boundary, function(k, v) {
latLngPOS.push(new google.maps.LatLng(v.lat,v.lng));
});
var polyOptions = {
path: latLngPOS,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.6
}
var it = new google.maps.Polygon(polyOptions);
it.setMap(map);
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"><\/script>
</head>
<body>
<div id="map"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#map {
height: 800px;
width: 1000px;
background: red;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">//var postcodes = '
$(document).ready(function() {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=Kasteleinenkampweg+7,+De+Rietvelden,+5222+s-Hertogenbosch', function(data) {
console.log(data.results[0].geometry.bounds);
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
gmapsinitialize(lat,lng, data.results[0].geometry.bounds);
});
});
//Create Google Maps @ header image div
function gmapsinitialize(longitude, latitude, boundss) {
if ($('#map').length != 0) {
var myLatlng = new google.maps.LatLng(longitude, latitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
flat: true
});
var boundary = [
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.701271,
lng: 5.28132
},
{
lat: 51.704764,
lng: 5.280125
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.704539,
lng: 5.282443
},
{
lat: 51.707806,
lng: 5.274349
},
{
lat: 51.701956,
lng: 5.290792
},
{
lat: 51.703097,
lng: 5.274672
},
{
lat: 51.705595,
lng: 5.273214
},
{
lat: 51.697299,
lng: 5.283693
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.701211,
lng: 5.274684
},
{
lat: 51.705812,
lng: 5.263983
},
{
lat: 51.69876,
lng: 5.268637
},
{
lat: 51.705255,
lng: 5.268066
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.702493,
lng: 5.269131
},
{
lat: 51.70376,
lng: 5.27288
},
{
lat: 51.701205,
lng: 5.268009
},
{
lat: 51.69975,
lng: 5.27222
},
{
lat: 51.700057,
lng: 5.274391
},
{
lat: 51.694502,
lng: 5.280762
},
{
lat: 51.697159,
lng: 5.281374
},
{
lat: 51.695612,
lng: 5.282817
},
{
lat: 51.714832,
lng: 5.275447
},
{
lat: 51.709212,
lng: 5.267656
}
];
var latLngPOS = [];
$.each(boundary, function(k, v) {
latLngPOS.push(new google.maps.LatLng(v.lat,v.lng));
});
var polyOptions = {
path: latLngPOS,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.6
}
var it = new google.maps.Polygon(polyOptions);
it.setMap(map);
}
}</script></body>
</html>
Raw
jsbin.papaq.css
#map {
height: 800px;
width: 1000px;
background: red;
}
Raw
jsbin.papaq.js
//var postcodes = '
$(document).ready(function() {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=Kasteleinenkampweg+7,+De+Rietvelden,+5222+s-Hertogenbosch', function(data) {
console.log(data.results[0].geometry.bounds);
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
gmapsinitialize(lat,lng, data.results[0].geometry.bounds);
});
});
//Create Google Maps @ header image div
function gmapsinitialize(longitude, latitude, boundss) {
if ($('#map').length != 0) {
var myLatlng = new google.maps.LatLng(longitude, latitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
flat: true
});
var boundary = [
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.69765,
lng: 5.291147
},
{
lat: 51.701271,
lng: 5.28132
},
{
lat: 51.704764,
lng: 5.280125
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.703174,
lng: 5.285176
},
{
lat: 51.704539,
lng: 5.282443
},
{
lat: 51.707806,
lng: 5.274349
},
{
lat: 51.701956,
lng: 5.290792
},
{
lat: 51.703097,
lng: 5.274672
},
{
lat: 51.705595,
lng: 5.273214
},
{
lat: 51.697299,
lng: 5.283693
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.695269,
lng: 5.284351
},
{
lat: 51.701211,
lng: 5.274684
},
{
lat: 51.705812,
lng: 5.263983
},
{
lat: 51.69876,
lng: 5.268637
},
{
lat: 51.705255,
lng: 5.268066
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.703302,
lng: 5.267897
},
{
lat: 51.702493,
lng: 5.269131
},
{
lat: 51.70376,
lng: 5.27288
},
{
lat: 51.701205,
lng: 5.268009
},
{
lat: 51.69975,
lng: 5.27222
},
{
lat: 51.700057,
lng: 5.274391
},
{
lat: 51.694502,
lng: 5.280762
},
{
lat: 51.697159,
lng: 5.281374
},
{
lat: 51.695612,
lng: 5.282817
},
{
lat: 51.714832,
lng: 5.275447
},
{
lat: 51.709212,
lng: 5.267656
}
];
var latLngPOS = [];
$.each(boundary, function(k, v) {
latLngPOS.push(new google.maps.LatLng(v.lat,v.lng));
});
var polyOptions = {
path: latLngPOS,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.6
}
var it = new google.maps.Polygon(polyOptions);
it.setMap(map);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment