I'm trying to display the MART transit system on a web map I'm building with the Javascript API. It's listed here by Google as one of the cities that they have transit data for, and indeed when you go to Google Maps there is bus data there.
The transit layer example page listed here works and displays transit data for Boston, Chicago, DC, etc, but not MART. Code as follows:
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 42.54, lng: -71.79}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChFsvLbqcDVBUQMFQJaMxA19PhTys6ZxY&callback=initMap">
</script>
</body>
Seems like it should work but no luck. The map appears, centered in the correct location, but no transit data for MART. If you go look at Boston, however, the transit layer appears there (as well as DC, Chicago, etc). In general it seems to be displaying train lines only but no bus lines. Any help would be greatly appreciated. Thanks!
You might to add some css because it's working but not showing
<style>
#map {
height: 400px;
width: 100%;
}
</style>
Here's a link to my working version
https://jsfiddle.net/mpuzz0tb/6/
If you want to show a map for both transit and bicycles, You need two seperate ids for the maps to be displayed - #dalewatt
Related
I've set up a map with a location marker, based in geo co-ordinates.
Now I'm being asked to base it on UK postcodes instead. How would I have to change the JS part to center on and place the marker into a postcode (ZIP) location? Thank you for any help here.
CSS:
<style>
.marker {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%238200b9;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Emarker%3C/title%3E%3Cpath class='a' d='M20,0A13.3353,13.3353,0,0,0,8.4524,19.9988L20,40,31.5476,19.9988h0A13.3354,13.3354,0,0,0,20,0Zm0,18.9166a5.6134,5.6134,0,1,1,5.6134-5.6134A5.6134,5.6134,0,0,1,20,18.9166Z'/%3E%3C/svg%3E");
background-size: cover;
width: 46px; height: 46px; margin-top: -23px;
}
</style>
HTML:
<div id='map' style='width: 100%; height: 500px;'></div>
JS:
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFya3VzYXR0cnVlIiwiYSI6ImNrNjk2NXB1ZzBhOWozdW45aHhxZ2hzODEifQ.ZWWxJP61cYov_9EN9PrKdQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 16 // starting zoom
});
// Add zoom and rotation controls
map.addControl(new mapboxgl.NavigationControl());
// Add marker
// Add marker
var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
.setLngLat([-74.5, 40])
.addTo(map);
</script>
You'll need to geocode the location. So you'll need another API for that. A quick google search shows that LocationIQ looks pretty good, but I'm sure there's tons. What you'll do is make an API call to your geolocation service with the postal code, and the response should contain a lat and lng which can then be used in your .setLngLat function.
Since you're already using Mapbox GL JS to display your map, I'd recommend using the Mapbox Geocoding API to get the latitude and longitude of a particular zip code. This guide from Mapbox gives a great conceptual overview of what geocoding is and how it works. For your use case specifically, the forward geocoding query type is most relevant.
For example, suppose you wanted to find the geographic coordinates for the UK zip code "EC1A 1BB". You can make the following request to the Mapbox forward geocoding endpoint:
https://api.mapbox.com/geocoding/v5/mapbox.places/EC1A%201BB.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN&autocomplete=true
, replacing YOUR_MAPBOX_ACCESS_TOKEN with the same access token you're using to load your GL JS map. If you look at the response body of this request by copying the request URL into your browser, you'll see that it returns place_name: "EC1A 1BB, London, Greater London, England, United Kingdom" and coordinates for the center of the zip code region: -0.1120425, 51.5245653.
So, you can parse the response body of this request to get the [longitude, latitude] of the geometry.coordinates, store the coordinates in a coordinates variable, and use this variable to position the marker on your map:
var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
.setLngLat(coordinates)
.addTo(map);
I'm an amateur web developer (by amateur I mean very low beginner level). I work at a Tour Operator and we recently started implementing the Google Maps API into our pages so we can show map location of lodges, hotels etc.
Unfortunately, most are already listed through Google and anyone is able to click the "View in Google Maps" option and get direct contact details (which is what we're trying to avoid as we work on commission.)
Is there any way to get a blank map so it only displays the points we plot?
If it helps, I'm currently using the Marker with Label javascript with the API
You mean is you need to Remove “labels” and all extra information from the map right.
you may go with adding some styles to your google map script.
here is full code for map withour information.
it may help.
you can change the colors and other styles if you needs
<!DOCTYPE html>
<html>
<head>
<title>Google map test demo</title>
<style type="text/css">
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
width: 750px;
height: 500px;
}
</style>
<!--
You need to include this script tag on any page that has a Google Map.
The following script tag will work when opening this example locally on your computer.
But if you use this on a localhost server or a live website you will need to include an API key.
Sign up for one here (it's free for small usage):
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
styles: [{"elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"color":"#f5f5f2"},{"visibility":"on"}]},{"featureType":"administrative","stylers":[{"visibility":"off"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi.attraction","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","stylers":[{"visibility":"off"}]},{"featureType":"poi.school","stylers":[{"visibility":"off"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#ffffff"},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"visibility":"simplified"},{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"color":"#ffffff"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","stylers":[{"color":"#ffffff"}]},{"featureType":"poi.park","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#71c8d4"}]},{"featureType":"landscape","stylers":[{"color":"#e5e8e7"}]},{"featureType":"poi.park","stylers":[{"color":"#8ba129"}]},{"featureType":"road","stylers":[{"color":"#ffffff"}]},{"featureType":"poi.sports_complex","elementType":"geometry","stylers":[{"color":"#c7c7c7"},{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#a0d3d3"}]},{"featureType":"poi.park","stylers":[{"color":"#91b65d"}]},{"featureType":"poi.park","stylers":[{"gamma":1.51}]},{"featureType":"road.local","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"poi.government","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"landscape","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.local","stylers":[{"visibility":"simplified"}]},{"featureType":"road"},{"featureType":"road"},{},{"featureType":"road.highway"}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'test!'
});
}
</script>
</head>
<body>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below
Im trying to add my map to my website, so far ive gotten it to show my map but its offset to the left by a few km
work in progress so far with markers off to the left: http://www.decking.co.il/indexwip.html#
my google maps site with the markers in the right place: http://goo.gl/maps/atvDH
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(32.147711,34.972229);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=211701918214336350936.0004be32c642b750948e4',
{preserveViewport:true});
ctaLayer.setMap(map);
}
please can somebody tell me what im doing wrong? ive been searching all day for a solution, am I mixing the wrong commands? Have I over complicated it somewhere? I've seen theres a way to simply embed into a webpage but I dont know how to make that embed appear inside the box thats provided for it in the template I'm using
It doesn't look "off to the left" to me. It looks like you have a css conflict like that discussed here.
In google earth there is a nice feature where I can install a kml file and it loads it in such a way so that I toggle different layers. In google maps I am looking for a way to display the kml file in a similar way. I want to have a sidebar where I can choose which layers to display. I have found this:
http://www.dyasdesigns.com/geoxml/
but it looks like it only works with google maps v2. Is there anything similar that will work with v3?
I found this QA, but I'm looking for something to use with V3
EDIT more info:
My body:
<body onload='load()' style = "height:100%; margin:0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
//************Function in head***************************************************
function load() {
var myOptions = {
//change this to zoom with markers
center: new google.maps.LatLng(60, 5),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
ctaLayer = new google.maps.KmlLayer('http://thoughtfi.com/NPDsFactGlobe.kml');
ctaLayer.setMap(map);
}
//load();
var map;
var ctaLayer;
var markersArray = [];
var startformat;
var endformat;
</script>
</body>
a link to the site (may be up and down if Im working on it.): http://thoughtfi.com/KMLtries.html
A picture from google earth. I want the functionality of the folders in the left column: http://thoughtfi.com/desired_look.png
http://www.google.co.uk/search?q=google+maps+v3+kml+parser
Ross/Udell: http://code.google.com/p/geoxml3/
Lance Dyas's replacement for geoxml: http://code.google.com/p/geoxml-v3/
Others are probably available too.
Have you considered the google.maps.KmlLayerapi-doc class? It provides a way to load, display, and hide KML files using a standard in-library facility. An introductory tutorial on using the KmlLayer is provided in the KML and GeoRSS Layers section of the Developer's Guide.