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>
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
]
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)
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>
Using the Google Maps API v3: How do I change the mouse cursor when I mouseover on a particular area?
Yes, this is possible by setting draggableCursor in MapOptions, as in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 Change Cursor Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.3, 150.6)
});
var ne = new google.maps.LatLng(-34.00, 150.00);
var nw = new google.maps.LatLng(-34.00, 150.50);
var sw = new google.maps.LatLng(-35.00, 150.50);
var se = new google.maps.LatLng(-35.00, 150.00);
var boundingBox = new google.maps.Polyline({
path: [ne, nw, sw, se, ne],
strokeColor: '#FF0000'
});
boundingBox.setMap(map);
google.maps.event.addListener(map, 'mousemove', function(event) {
if ((event.latLng.lat() > se.lat()) && (event.latLng.lat() < ne.lat()) &&
(event.latLng.lng() > ne.lng()) && (event.latLng.lng() < sw.lng())) {
map.setOptions({ draggableCursor: 'crosshair' });
}
else {
map.setOptions({ draggableCursor: 'url(http://maps.google.com/mapfiles/openhand.cur), move' });
}
});
</script>
</body>
</html>
If you run the above example, the cursor would change to a cross hair once the mouse is moved inside the red rectangle.
Other answers advising to to put 'mousemove' listeners on the whole map object will work but are wrong. This is 'heavy handed' and a bad idea as listeners like these can add up in a real application and when combined with other things happening on your map, can cause serious performance problems and possibly unforeseen race conditions!
The BEST way to do this is to use the google.maps.Polygon class. This allows you to pass a series of LatLng objects to create a Polygon. This polygon is rendered on the map and has a default mouseover attribute of 'pointer', you can add a 'mouseover' listener to the object returned from the new google.maps.Polygon class call.
The source below is from this example
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Then I can add the listener like this
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8