As it seems to me, google made some changes to the way their google maps API displays Polylines. Up until last time I checked (3 months ago) Polylines would always be visible at all zoom-levels. When fully zoomed out, the polyline would just be a small dot on he map.
Now, using the same code (basically just the example code offered by google) when I zoom out, the polyline will disappear. This only happens, in case the waypoints of the polyline a very close together.
Example: A Polyline confined to some streets in a small town will not be visible, when zoom out completly. A Polyline which connects to points with a distance of 1000 miles will always be visible.
How can I get the short Polyline to be displayed at all zoom-levels, even if it will just be a small dot?
Example here:
https://plnkr.co/edit/v7FksNUxlpm1f6ag0iQs?p=preview
just zoom out, at some point the polyline will disappear, which I do not want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: 37.772, lng: -122.214},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 37.771, lng: -122.215},
{lat: 37.770, lng: -122.216},
{lat: 37.760, lng: -122.218}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 40
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
Call zoomIn or zoomOut on another thread loop. (ex. setTimeout(event)
Related
i have problem implementing address visualization on markers within m google maps dynamic map.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 44.0, lng: 12.0}
});
// Create an array of alphabetical characters used to label the markers.
var labels = '';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 44.5153, lng: 11.3428},
{lat: 44.4926, lng: 11.3657},
{lat: 44.4948, lng: 11.3158}
//input geocode continue
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=initMap">
</script>
</body>
</html>
I want to add on click popup information on each marker, but i cannot manage to do it, i've searched a lot but I'ven't find any working solution.
Someone can help me?
i've edited your code to let it work with info window
before, initializing the markers add this line of code
var infoWin = new google.maps.InfoWindow();
this will initialize the info window, now modify your markers initialization to this
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
//// here we are adding the event listner for the markers to open the info window on click
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
notice we are reading the info from the location array so change your locations array to include a third parameter "info" like this
var locations = [{
lat: 44.5153,
lng: 11.3428,
info: 'place 1'
}, {
lat: 44.4926,
lng: 11.3657,
info: 'place2'
}, {
lat: 44.4948,
lng: 11.3158,
info: 'place 3'
}
//input geocode continue
]
I have a requirement in Google Map. I have Start and End Point. In between them, there are few waypoints. I have to connect start and end point through the waypoints. This is feasible with google map api and i have done this. But in one case, i have to draw rail route, that is, two waypoints will be connected by rail route. So, i have a have route consisting of car route and rail route.
Sample: Consider A, B, C and D are the places.
A - Start Point, B- WayPoint 1, C - Waypoint 2, D - End Point
A to B - Car route
B to C - Rail route
C to D - Car route
How am i supposed to do this.??
Please guide me.!!
I hope this example used for you And must be register YOUR_API_KEY
also change your location latitude and longitude flightPlanCoordinates javascript variable value
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?authuser=2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I don't what's causing this issue, I am not able to see google mp even though it's loading.
jQuery is being loaded, bootstrap classes are also being loaded.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<div id="map" style="height:450px;width:100%;"></div>
And this is how my map is being shown.
I have experienced something similar, because i have the map on a button that shows and hide it(bootstrap collapse action). How i solved: Try Showing the map without any container, if this works, check the container of the map that are you using.
It seems that the Google Maps Loading are affected by the "collapse" action of bootstrap. When i load the map without the collapse action it works, so the problem is that you have the map in "not active" or "not showing" status and the map doesn't load properly.
My Function code of the Map:
google.maps.event.addDomListener(window, 'load', initMap);
function initMap(){
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 4.619870, lng: -74.067577},
zoom: 16});
var mainmarker = new google.maps.Marker({ //Line 1
position: {lat: 4.619870, lng: -74.067577}, //Line2: Location to be highlighted
map: map,//Line 3: Reference to map object
title: 'Casa de Bolsa', //Line 4: Title to be given
icon : 'images/pin.png'
});
//console.log("map ready");
return map;
};
seems simply a wrong order of the element
try this way ( And check if sensor is effectively required.. )
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
</head>
<body>
<div id="map" style="height:450px;width:100%;"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
</body>
try this,
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map" style="height:450px;width:100%;"></div>
standard way ref-http://www.w3schools.com/googleapi/google_maps_basic.asp
The script is defined before function so it can't find it. You can use async defer.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap" async defer></script>
I want to create a map with circle overlay using Google Maps API which is similar to the below site:
[link]https://whypoll.crowdmap.com/
I am able to add circle layer to the Google Map API. Could anyone tell me how to get the count inside the circle. For example here it should print 1 inside the circle.
Thanks in Advance.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Circle Overlay</title>
<style type="text/css">
#map {
width: 1200px;
height: 775px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script type="text/javascript">
/**
* Called on the initial page load.
*/
function init() {
var mapCenter = new google.maps.LatLng(23.30, 80.00);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 5,
'center': mapCenter,
draggable: false,
disableDefaultUI: true,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
// map: map,
position: new google.maps.LatLng(18.7000, 79.1833),
draggable: false
});
var circle = new google.maps.Circle({
map: map,
radius: 100000,
strokeColor: "#FF0000",
fillColor: "#FF0000",
fillOpacity: 0.35,
strokeWeight: 2,
strokeOpacity: 0.8
});
// Since Circle and Marker both extend MVCObject, you can bind them
// together using MVCObject's bindTo() method. Here, we're binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
circle.bindTo('center', marker, 'position');
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.