I have an existing map on a web page that is zoomed and centred properly using the following script segment:
var mapOptions = {
center: { lat: 43.57023, lng: -79.48676 },
zoom: 12
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
I then add the kml layer using:
var myLayer = new google.maps.KmlLayer({ url: "" });
myLayer.setMap(map);
This has been working for the last year. However I had to update the kml file to include a wider area. The new kml file works but the new zoom and centre locations aren't being respected.
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: { lat: 48.0, lng: -89.0 },
zoom: 4
});
Instead the map is zoomed out so I see 3 complete Earths plus a bit on each side and the centre is way above the North Pole. You can see the two different results at http://www.a711lions.ca/recycleforsight/locationmap.html and http://www.a711lions.ca/recycleforsight/locationmap2.html.
I have read that I can use a layer.preserveViewport setting to overcome this, but I'm trying to understand why it is even happening. AFAICT the points are all in Canada (they certainly don't show up in the triple-Earth view as being anywhere else) so why is the KML layer so huge?
Any ideas?
Your KML file contains a bad point:
<Placemark>
<name>Dr. Sibbald</name>
<description><![CDATA[<br><b>Address:</b> Applewood Shopping Ctre, Suite 210, 1077 N. Service Rd<br><b>City:</b> Mississauga<br><b>Postal Code:</b> L5R 2X5<br><b>Telephone:</b> (905)273-9009<br><b>Sponsoring Club:</b> Mississauga Credit Valley Lions Club]]></description>
<styleUrl>#icon-503-DB4436</styleUrl>
<Point>
<coordinates>-3.0,90.0,0.0</coordinates>
</Point>
<!-- ... -->
</Placemark>
It located at the North Pole.
Related
Since Google Fusion Tables has been shut down, I'm trying to recreate a data layer (with U.S. Counties) using a JSON file.
Here is my JS:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: {lat: 39.8283, lng: -98.5795},
zoom: 5
});
var script = document.createElement('script');
//call json file of US counties
script.src = 'assets/sheet/places.json';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
When I run the page, the map works but I get an error that says: "Uncaught SyntaxError: Unexpected token ':'" at only the second line of the JSON file.
Does anyone know what I can do to fix this? I've looked through pages of Google and haven't been able to find a solution. FYI, I basically have no experience with JSON but haven't found another way to convey a large dataset easily with Google Maps API.
The JSON file is here, in case anyone wants to see: https://www.estherloui.se/projects/sheet/gz_2010_us_050_00_20m.json
You can add GeoJSON data to your map using loadGeoJson. See the code below:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: { lat: 39.8283, lng: -98.5795 },
zoom: 5
});
map.data.loadGeoJson('assets/sheet/places.json');
}
</script>
Screenshot:
Hope this helps!
I have a LatLng location (the current location of the user) and a bearing (from the centre of the polygon). I know the location is currently inside the polygon, and I can get the bearing from the centre of the polygon and the user's location.
I need to know the point on the edge of the polygon given the bearing from the centre. I envisage this as being an intersection between a line from the centre and the edge of the polygon, but I don't see any helpers in Google Maps API or any examples online.
This will be written in Java using Google Maps SDK, but I would appreciate a solution in any language, especially Javascript.
The following crudely drawn diagram illustrates the problem (hopefully) more clearly.
Here's a jsfiddle with (not the) centre position and a user location.
http://jsfiddle.net/joshkopecek/rh9mzyoa/2/
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: new google.maps.LatLng(22.7964, 79.8456),
mapTypeId: google.maps.MapTypeId.HYBRID
});
var coords = [
new google.maps.LatLng(18.979026, 72.949219), //Mumbai
new google.maps.LatLng(28.613459, 77.255859), //Delhi
new google.maps.LatLng(22.512557, 88.417969), //Kolkata
new google.maps.LatLng(12.940322, 77.607422), //Bengaluru
];
metros = new google.maps.Polygon({
paths: coords,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.26
});
userPos = new google.maps.LatLng(21.1952534, 81.2680344);
userMarker = new google.maps.Marker({
position: userPos,
map: map
});
centrePos = new google.maps.LatLng(22.049832, 78.9022019);
centreMarker = new google.maps.Marker({
position: centrePos,
map: map
});
heading = google.maps.geometry.spherical.computeHeading(centrePos, userPos);
metros.setMap(map);
var metros;
var userMarker;
var centreMarker;
var heading;
}
According to the docs you could use isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number) which will return if a given point is on the edge of a polygon, within a certain tolerance. You could use computeOffset with your heading to test points along a path until you find what you need.
As an aside, any real/intensive spatial analysis I have not had much luck with client-side technologies. My preferred method would usually be a server call backed by a spatial database like PostGIS that I can then offload all the analysis to. You could look at ESRI's JavaScript api though, if you were so inclined.
I'm currently trying to use google maps to first display a map of United States with the weather and cloud google map layers and then zoom into the user's location using geolocation google maps api. My problem right now is I am only able to display the map without any of the weather, cloud, or geolocation information and only using the iframe basic view mode maps api. I am fairly new to javascript but have a div with an id "map-canvas" in my body tags and a javascript file mapWeather.js in my head tags.
mapWeather.js:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
You probably already know, but do note that this library has been deprecated and will stop working in June.
I want to be able to show the current user location, and to automatically put a pin where the user is located. I need this in HTML/JavaScript, full code. Please help.
You've to use the Google API (JavaScript in this case) to show current location in maps. You've to import the library with:
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer>
And use the function initMap:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: initLat, lng: initLon},
zoom: 6
});
When you obtain lat and lon from the navigation.geolocation, you've to update the map with map.setCenter(pos);, when pos is an array with lat and lon.
Here you've a full example.
Google official doc
I hope it helps :-)
I have a list of retailers and their logos and what I wanted to do was display them on a google map. I suppose the purpose of it is to demonstrate the extend of our market reach.
What I want to do is be able to add the markers, however when I click on them, I would want to replace the text in the speech bubble to my own text, and also insert the retailer logo for that location.
Is this possible? If anyone had any advice as to how I might go about doing this also would be fantastic.
This is certainly possible. First you need to do is use the Google Geocoding service to convert your list of retailers (I assume you have addresses) to a list of retailers with latitudes and longitudes.
Once you have a latitude, longitude information for your retailers you can create google.maps.marker objects for each one and attach them to a google.maps.Map object:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// where map_canvas is the id of a div that will contain the map on your page
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// for each of your retailers
{
var retailerLocation = new google.maps.LatLng(-25.363882,131.044922);
var retailerMarker = new google.maps.Marker({
position: retailerLocation ,
map: map,
title:retailerName
});
}
You can handle the click event on each of the retailerMarkers and display a google.maps.InfoWindow with the appropriate content (you can control the content of the InfoWindow as you would any other piece of your web UI).