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>
Related
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 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
I created map view using google map api, changed markers into circles by using google.maps.Circle circles printing on map with no issues on that but I can't add label or text into it. How can I fix that.
Here is the code I used to print circles
function initialize() {
var frrlanser_marker = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
radius: 60 * 100
};
var latlng = new google.maps.LatLng(6.951974, 80.720160);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
<?php foreach($results as $val): ?>
<?php if($val->geo_location != ""): ?>
<?php if($val->fontUserTypeId == 1) { ?>
var fill_color_val = '#3888ff';
<?php } else { ?>
var fill_color_val = '#70d04f';
<?php } ?>
<?php $LatLng = explode(",", $val->geo_location); ?>
var latitude = <?php echo $LatLng[0]; ?>;
var lontitude = <?php echo $LatLng[1]; ?>;
var myLatLng = {lat: latitude, lng: lontitude};
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 3200, // 10 miles in metres
fillColor: fill_color_val,
strokeColor: '#FFFFFF',
strokeWeight: 2,
fillOpacity: 1,
});
circle.bindTo('center', marker, 'position');
marker.setVisible(false);
}
google.maps.event.addDomListener(window, "load", initialize);
You can add an InfoBox with your desired label/text over the circle.
proof of concept fiddle
code snippet:
function initialize() {
var frrlanser_marker = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
radius: 60 * 100
};
var latlng = new google.maps.LatLng(6.951974, 80.720160);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var fill_color_val = '#3888ff';
var latitude = 6.951974;
var lontitude = 80.720160;
var myLatLng = google.maps.LatLng(latitude, lontitude);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 3200, // 10 miles in metres
fillColor: fill_color_val,
strokeColor: '#FFFFFF',
strokeWeight: 2,
fillOpacity: 1,
});
circle.bindTo('center', marker, 'position');
marker.setVisible(false);
var labelText = "1";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "10pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -5),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-infobox#2.0.0/infobox-module.min.js"></script>
<div id="map"></div>
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>
I am trying to add click listener on my map and here is my code for this
update
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<style>
#map-canvas{
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
var cityPoints = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 500
});
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(31.2330555556, 72.3330555556),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
clickable: true,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(31.231867, 72.33336),
radius: 200000
};
cityCircle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(cityCircle, 'click', function (ev) {
infoWindow.setPosition(ev.latLng);
infoWindow.open(map);
});
}
initialize();
</script>
<body>
<div id="map-canvas"></div>
</body>
</html>
But this code is not working for me becasue infor window is not opening when i click on circle.Plz any one tell what exactly i am missing in my code.Plz Help
Maybe this google.maps.event.addDomListener(window, 'load', initialize); is what is missing.
And here is a working example
http://jsfiddle.net/9bnCw/6/
I made the radius a little bigger.
UPDATE
Does this work?
UPDATE 3
I've put it all in one file so you can copy and paste it.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas{
height:100%;
width:100%;
}
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var cityPoints = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 500
});
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(31.231867, 72.33336),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
clickable: true,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(31.231867, 72.33336),
radius: 200000
};
cityCircle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(cityCircle, 'click', function(ev) {
infoWindow.setPosition(ev.latLng);
infoWindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>