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.
Related
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
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>
In my HTML page instead of using:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.489021, -0.1164075),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
I'd like to use a Custom Map I've created.
https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80
But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?
Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.
I have seen that many users have asked this question, but in fact there is still no answers with examples of how to use Google Maps without a key (all the answers are references to another webpages).
I have managed to use Google Maps without the key, but I only managed to get a static map. Do you have any idea how do this dynamic?
var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true";
return img; //OR document.body.appendChild(img);
Even if you simply click this link you can see the map, and if you change the "url properties" you can "edit" the map:
http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true
When I say "dynamic map" I mean to somethins like this: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple
This has worked for me. I tried it on localhost. Various other solutions in stackoverflow didn't helped.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&output=embed"></iframe><br />
In this way we can generate maps dynamically based upon the address we entered in the back end.
As #geocodezip said, You're looking for Google Maps Javascript v3.
Here is simple example of using it(picked from my old answer), this doesn't need any keys.
HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
Javascript:
function initialize() {
var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//=====Initialise Default Marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'marker'
//=====You can even customize the icons here
});
//=====Initialise InfoWindow
var infowindow = new google.maps.InfoWindow({
content: "<B>Skyway Dr</B>"
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have created a simple fiddle for your reference.
Hope you got some idea.
Since you're not interested in using keys, Beware of the limits.
Google Maps Javascript API : up to 25,000 map loads per day for each
service.
This includes:
a map is displayed using the Maps JavaScript API (V2 or V3) when
loaded by a web page or application;
a Street View panorama is displayed using the Maps JavaScript API (V2
or V3) by a web page or application that has not also displayed a
map;
a SWF that loads the Maps API for Flash is loaded by a web page or
application; or
a single request is made for a map image from the Static Maps API.
a single request is made for a panorama image from the Street View
Image API.
From your comments,
I too tried using canvas, it was not working.
var mapCanvas = document.createElement("canvas");
But this is working good with div element.
var mapCanvas = document.createElement("div");
mapCanvas.style.width = "200px";
mapCanvas.style.height = "200px";
Updated JSFiddle
Don't forget to set width and height properties.
I am putting an example on plunker
http://plnkr.co/T4eULTnKbWCKlABPI4pu
and the code
<!DOCTYPE html>
<html>
<body>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&ie=UTF8&&output=embed"></iframe><br />
</body>
</html>
Use the Google Maps Javascript API v3 (lots of good examples in the documentation)
try it from android phone
href = "google.streetview:cbll=51.470305,-0.183842&cbp=1,10,,0,2.0&mz=mapZoom"
add this to your anchor link
I know how to add the Google Map on my restaurant's webpage, but how can I have range of delivery (semi-transparent polygon)?
Here is an example: link
Maybe it can be done by somehow put a semi-transparent image on Google Map? But how can this be done?
The polygon is the way to go, with a "event.latLng" click listener to help plot your region
See here:
http://jsfiddle.net/MFfTc/2/
Clicking on the map will define the polygon vertices, then you can copy that to your real map. Remove the last comma and add a bracket ].
You could draw a polygon with google earth and then save it to a KML file and load it on google maps api v3
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
kml_layer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
kml_layer.setMap(map);
In the Google Maps API, you can create a Polygon overlay. You need to know the coordinates of each vertex. If you don't, you could use the Google Maps API Drawing Tools to figure it out.
I found this link that allows you to place moveable markers on Google Maps and paste html code into your site: http://www.nirmalpatel.com/ourarea/