I have been using the following google maps example code. It shows a circle hovering on a city, the more population, the bigger the circle. This code works well, but... it reloads only when i reload the browser window. Is there a smarter way to make it autorefresh/reload? Many thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
You just need to add auto refresh Jscript .
<script language="javascript">
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>
You could use a method called location.reload(true) and set this to a timer or even in a periodialExecuter function using the reload inside this method something like this....
new PeriodicalExecuter(function(pe) {
location.reload(true);
}, 10);
This will reload your page every ten seconds...as if you where loading the browser yourself
Related
I need to cover some city by using some color, in some area. I am using google maps API, can give me some idea how to solve this?
Example:
You can construct a polygon using the Polygon class.
Simple example from google provided.
The paths property can take an array of arrays to create multiple polygons.
See the full example here: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
And documentation: https://developers.google.com/maps/documentation/javascript/reference/polygon
Eg:
var triangleCoords = [
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
],
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
]
];
Hope that helps.
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I am trying to make a routeplanner which allows users to click on random points on the map and create a route.
Now I'm having some trouble getting the values into the polyline variable.
I have searched around on Google but I can't seem to find a way to keep adding values on top of already existing values. These values come from the click event on the map.
So how do I add values to a variable with the same format on each click event?
function initMap() {
var location = {
lat: 51.3554957,
lng: 5.4533268000000135
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log(latitude + ', ' + longitude);
});
var flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
},
{
lat: 21.291,
lng: -157.821
},
{
lat: -18.142,
lng: 178.431
},
{
lat: -27.467,
lng: 153.027
}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
</script>
</body>
</html>
Expected result (4 clicks):
var flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
},
{
lat: 21.291,
lng: -157.821
},
{
lat: -18.142,
lng: 178.431
},
{
lat: -27.467,
lng: 153.027
}
];
Take a look at the following:
function initMap() {
var flightPlanCoordinates = [];
var location = {
lat: 51.3554957,
lng: 5.4533268000000135
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log(latitude + ', ' + longitude);
flightPlanCoordinates.push({lat: latitude, lng: longitude});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
</script>
</body>
</html>
I'm using squarespace to build my website and want to insert a custom map from google maps javascript api. I've followed tutorial from W3school and from Google's own tutorial to build my map and follow steps as below :
What I'm trying to archive is a map like this
google map example
Step 1: Insert a embed block for html
<div id= "map"></div>
Step 2: insert javascript in page header
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var 10th = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var 10th = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
10th.setMap(map);
}
</script>
Step 3 : in custom css section
#googleMap {
width: 100%;
height: 380px;
}
But so far, I got either a blank page once javascript injected or error page (with code visible on top of the page... )
Here the link to my webpage on SquareSpace https://handa-cheng-a3wm.squarespace.com/1starrondissement
Thanks !
You have few typos in your code:
var 10th = [...] // invalid variable name
^---
Variables names in JavaScript must not begin with numbers. And you have defined the function but didn't run it.
You have not set height for #map in css.
<div id= "map"></div>
#googleMap { // <== this is not correct id as used in html above
width: 100%;
height: 380px;
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var points = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
}
initMap();
#map {
height: 300px;
}
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>
Problem:
Adding multiple characters to markers using Google Maps API.
Minimal Working Example (MWA):
In the example below I map a line between two airports (PEK and FRA) but the markers don't seem to allow for multiple characters.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polyline</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var flightPath;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 39.782, lng: 116.387},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPathCoordinates = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var myPEK = {lat: 39.782, lng: 116.387};
var myFRA = {lat: 50.026, lng: 8.543};
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
addLine();
var marker = new google.maps.Marker({
position: myPEK,
map: map,
label: 'PEK',
title: 'Beijing'
});
var marker = new google.maps.Marker({
position: myFRA,
map: map,
label: 'FRA',
title: 'Frankfurt'
});
}
function addLine() {
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI9AcuDk0DxHVFjbAsSZz2DMm4zqsdCA&callback=initMap">
</script>
</body>
</html>
Desired output:
Get markers to work with multiple characters.
Add labels that allow for at least 3 characters.
Any other solution that would show the IATA code for the airports.
If you need a map Label you can use an extension library called google-maps utility libraries v3 map label ..
You can find the code at : https://github.com/googlemaps/js-map-label
add this library to your
aMapLabel = new MapLabel({
text: 'Your Text',
position: mapLabelCenter,
strokeColor: '#FFFFFF',
fontColor: '#FFFFFF',
map: map,
fontSize: 24,
strokeWeight: 0,
align: 'left'
});
marker.bindTo('map', aMapLabel);
marker.bindTo('position', aMapLabel);
or you can use also https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel
These two are the better solution for manage label (or markers with label) in google maps
Working solution (not optimised):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>TravelTools Google Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<script>
var flightPath;
var map;
function init() {
var myLatlng = new google.maps.LatLng(39.782, 116.387);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var flightPathCoordinatesPEKFRA = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var flightPathCoordinatesPEKCDG = [
{lat: 39.782, lng: 116.387},
{lat: 49.012, lng: 2.55}
];
flightPathPEKFRA = new google.maps.Polyline({
path: flightPathCoordinatesPEKFRA,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPathPEKCDG = new google.maps.Polyline({
path: flightPathCoordinatesPEKCDG,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
flightPathPEKFRA.setMap(map);
flightPathPEKCDG.setMap(map);
// PEK
var myPEK = new MapLabel({
text: 'PEK',
position: new google.maps.LatLng(39.782, 116.387),
map: map,
fontSize: 11,
align: 'center'
});
myPEK.set('position', new google.maps.LatLng(39.782, 116.387));
var marker = new google.maps.Marker();
marker.bindTo('map', myPEK);
marker.bindTo('position', myPEK);
// FRA
var myFRA = new MapLabel({
text: 'FRA',
position: new google.maps.LatLng(50.026, 8.543),
map: map,
fontSize: 11,
align: 'center'
});
myFRA.set('position', new google.maps.LatLng(50.026, 8.543));
var marker = new google.maps.Marker();
marker.bindTo('map', myFRA);
marker.bindTo('position', myFRA);
// CDG
var myCDG = new MapLabel({
text: 'CDG',
position: new google.maps.LatLng(49.012, 2.55),
map: map,
fontSize: 11,
align: 'center'
});
myCDG.set('position', new google.maps.LatLng(49.012, 2.55));
var marker = new google.maps.Marker();
marker.bindTo('map', myCDG);
marker.bindTo('position', myCDG);
marker.setDraggable(true);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm planning to use google map "containsLocation()" API in one of my application. The doc link is - https://goo.gl/4BFHCz
I'm following the same example. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
//center: {lat: 24.886, lng: -70.269},
center: {lat: 12.9629277, lng: 77.7178972},
zoom: 30,
});
/*var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];*/
var triangleCoords = [
{lat: 12.96301273, lng: 77.71785952},
{lat: 12.96314857, lng: 77.71784072},
{lat: 12.96316124, lng: 77.71784037},
{lat: 12.96295465, lng: 77.71788993},
{lat: 12.96293329, lng: 77.7179345},
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var curPosition = {"lat":12.9629277,"lng":77.7178972};
//var curPosition = e.latLng;
console.log("e content : "+JSON.stringify(e.latLng));
console.log("curPosition content : "+JSON.stringify(curPosition));
var resultColor =
google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPosition,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiAur6ANJsV776iVmMDJcHYjQkXrXyu8s&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
If you see I've created a curPosition variable which holds the latLng data. My problem at here is as long as var curPosition = e.latLng; it works fine but, the moment I changed that to var curPosition = {"lat":12.9629277,"lng":77.7178972}; it's started showing error "Uncaught TypeError: a.lng is not a function".
Can't able to understand why it's happening? Any clue...?
Console.log screen shot attached
Regards
the containsLocation method requires a google.maps.LatLng as the "point" (at least at present), you can't use a google.maps.LatLngLiteral for currentLocation.
from the documentation:
containsLocation(point:LatLng, polygon:Polygon) | Return Value: boolean
Computes whether the given point lies inside the specified polygon.
var curPosition = new google.maps.LatLng(12.9629277,77.7178972);
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 12.9629277,
lng: 77.7178972
},
zoom: 30,
});
var triangleCoords = [
{lat: 12.96301273,lng: 77.71785952}, {lat: 12.96314857, lng: 77.71784072}, {lat: 12.96316124, lng: 77.71784037}, {lat: 12.96293329, lng: 77.7179345}, {lat: 12.96295465, lng: 77.71788993}];
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
map: map
});
var curPosition = new google.maps.LatLng(12.9629277, 77.7178972);
console.log("curPosition content : " + JSON.stringify(curPosition));
var resultColor =
google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPosition,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
var curPositionB = new google.maps.LatLng(12.963, 77.71788993);
var resultColorB = google.maps.geometry.poly.containsLocation(curPositionB, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPositionB,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColorB,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>