recently started messing with Google Maps API, and wanted to create a custom map with certain countries highlighted (I know - classic problem). There are multiple topics on this in here already and I went through them already.
When I try to do this using 'country' tables, their polygon data is horrible. The output becomes something like this:
I came across with another dataset today called Geocodezip. And here is the code I use (inherited from another post here and tweaked a little) and the output I see when I draw it (deleted the API key from the code)
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
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'), {
center: {lat: 40, lng: 25},
zoom: 6
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col38",
from: "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA",
where: "col2 in ('GRC')"
},
options: {
styleId: 9,
templateId: 8
}
});
layer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=__my_API_key_here__&callback=initMap"
async defer></script>
</body>
</html>
The difference is overwhelming, and I'd like to proceed with the second map. Yet it has state borders in it as well as the country border. I only need the country border.. Is there a way to use the second dataset country borders only? How do I eliminate them?
P.S.: Also can you tell me how to edit the drawing color? Couldn't find styleID descriptions for Geocodezip
Ok, figured out the answer on my own after looking into source code of the other example I discovered. Turns out what I look for is on another table:
from: "419167",
where: "sovereignt in ('Greece')"
Just changed the two lines above and it's working perfectly.
Related
I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:
Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.
Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.
Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.
The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”
Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<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>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:
example with unique ids
Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.
code snippet with updated kmz file:
/* 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;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
I am working on something that leverages the Google Maps API to draw n number of polygons using GeoJSON. I was successful in drawing it, but I also want to increase the opacity of the polygons drawn, as well as remove an ugly outline on each of the polygons.
I looked through the documentation on the Google Maps API here, but it only tells you how to load the GeoJSON file, not modify traits of the drawn polygons.
map.data.loadGeoJson('google.json');
That up there is how you load the GeoJSON and the only command that you can use. I know it seems that I haven't tried anything, but I have and none of it's substantial enough to include in this question.
So my question is - How do you remove the outline from GeoJSON drawn images and also increase the opacity?
Below is also an image of what it currently looks like:
use fillOpacity: 1 and strokeWeight: 0 in style options
https://plnkr.co/edit/puMK8mAskLiaExmNKIEI?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<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>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// Set the stroke width, and fill color for each polygon
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
fillColor: color,
fillOpacity: 1,
strokeWeight: 0
};
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</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 myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I'd like to localise the map generated by Gmaps4rails, so I can show place names in the users desired language. Google documents how to do this here: https://developers.google.com/maps/documentation/javascript/examples/map-language
I'm using a fairly standard (and currently functional) implementation of Gmaps4rails, which you can see here.
handler = Gmaps.build('Google');
handler.buildMap({
provider: { styles: mapStyle },
internal: {id: 'map'}
}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
Rendering to the html...
<div class="map-container">
<div id="map"></div>
</div>
I just need to find out where to define the language code. I've tried adding it as an option to the provider, with no joy (e.g. provider: { styles: mapStyle, language: 'zh-TW' }).
I've scoured the documentation (and source), but can't seem to find any info on this. Any help would be appreciated!
You have to indicate the language in the script.
For example in the Maps API v3 Now Speaks Your Language:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR">
You can find the list of languages here.
Here is the code sample:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example displays a map with the language and region set
// to Japan. These settings are specified in the HTML script element
// when loading the Google Maps JavaScript API.
// Setting the language shows the map in the language of your choice.
// Setting the region biases the geocoding results to that region.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 35.717, lng: 139.731}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP"
async defer>
</script>
</body>
</html>
As you can see in this code line, key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP, language is set to jp = Japanese.
Also check their working sample with a dynamic language setting.
Hope this helps!
I'm trying to migrate my application to latest version of Google map API and found that Google appends it's own items by default from Google Places directory to the map.
It does not look right together with my own records as it creates duplicate items on the map which can be placed in correctly.
Is there an option how to hide this local businesses or to control what is shown and what is not?
here is sample code:
<!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">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(37.422833333333,25.323166666667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
As you can see on map, there are few tiny icons, which you can click on and information would appear in bubble. I need to hide this icons or at least disable on click event for this items.
Just a pointer - this seems possible with custom styled maps. If I'm not mistaken, the feature type you're looking for would be poi.business, whose visiblity you would turn off.
There's a wizard to help you build the options array.
You can remove it by adding the following code:
var styles = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});