I'm doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.
Related
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map {
height: 90%;
}
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: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
The KML present here - http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml is not shown on the map.
All my other KML files work ok, just not this one. I believe this is because there are many coordinates in the KML file.
Any help to fix it would be appreciated.
In your 5th placemark/polygon (the big one), the line with the geometry/coordinates seems to be truncated. First clue is that there appear to be missing tags at the end of the line. It ends with only the </MultiGeometry> tag, when it needs to end with: </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>.
Looking more closely at the last set of coordinates, they appear to be cut off, ending after the decimal point in the 2nd number: -96.697594,46.
So you'll need to at least add the appropriate tags to close out the line, and probably fix the last coordinate pair (or just remove it). That should give you a valid KML file which should load (so long as the geometry isn't too big for Maps). You'll also want to check the source data to see if additional coordinates are missing from that line, and if so, figure out how to get them back.
To help others with similar issues, do you know how that KML was generated? With what software? Maybe something that can only handle so many characters in the coordinate string?
I'm developing a web app for an HP Compaq L2105tm touch screen on a windows 7 box. When I bring up maps.google.com in Chrome the map works just fine with pinch zooming and other touch events you'd expect from a touch screen. However, when I use the following code to do a basic google map embed, the touch events do not work as expected. (Pinch zoom does not work.)
<!doctype html>
<html lang="en">
<head>
<style>
html, body, div#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
(function() {
var div = document.getElementById('map');
var lat = -36.5;
var lng = 150.5;
var options = {
center: new google.maps.LatLng( lat, lng ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
var map = new google.maps.Map( div, options );
})();
</script>
</body>
</html>
My question is why does maps.google.com work with pinch zoom and my map not work with pinch zoom in the exact same browser/touch environment?
UPDATE
This issue was handled in the bug
https://issuetracker.google.com/issues/35824421
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
I have the same problem and actually spoke with someone on the Google Maps Api team and they are aware of the issue. Unfortunately, there is no timetable for when it will be addressed. So I guess you can take solace in knowing that they know it is an issue.
Seems like the new api addresses this
https://developers.google.com/maps/documentation/javascript/basics#Mobile
Is there a good way to integrate a google map to the apache openmeetings 2.0？
I search it and find use about openlaszlo http://code.google.com/p/openlaszloincubator/source/browse/trunk/googlemapsonlaszlo/?r=32#googlemapsonlaszlo%253Fstate%253Dclosed
and the site http://code.google.com/p/openmeetings/source/browse/trunk/singlewebapp/WebContent/lps/components/incubator/googlemap.lzx?r=3529 which don't base on openmeetings 2.0！
Does any one realize it？
Google has deprecated the Google Maps Flash APIs in late 2011.
"Consequently we have decided to deprecate the Maps API for Flash in
order to focus our attention on the JavaScript Maps API v3 going
forward. This means that although Maps API for Flash applications will
continue to function in accordance with the deprecation policy given
in the Maps API Terms of Service, no new features will be developed,
and only critical bugs, regressions, and security issues will be
fixed. We will continue to provide support to existing Google Maps API
Premier customers using the Maps API for Flash, but will wind down
Developer Relations involvement in the Maps API for Flash forum."
Therefore - if you are not already an existing Google Maps API Premier customer - you will not be able to utilize the Google Maps OpenLaszlo component in the incubator. You should instead use the Google JavaScript Maps API v3. The map object can be integrated using the <html /> tag in the SWF runtime. If you only plan to use the DHTML runtime you could attach the map object directly to the display object of a view.
Since the current version of OpenMeetings still seems to use the SWF runtime as the default target runtime, that leaves you with the option of using an iFrame through the <html src="" /> tag.
Here is a simple example based on the code you had in your comment. The example uses two files: One LZX file, and one HTML file containing the Google Maps example. Here is the LZX code:
<canvas height="500">
<class name="showGISWindow"
extends="view"
width="464" height="440">
<method name="setLatLong" args="lat,lng">
this.maps.callJavascript('centerMap(' + lat + ', ' + lng + ')' );
</method>
<button text="Show New York"
align="center"
onclick="parent.setLatLong(40.69847032728747, -73.9514422416687)" />
<html name="maps" src="gmaps.html"
x="15" y="45"
width="${parent.width - 30}"
height="${parent.height - 45}" />
</class>
<showGISWindow id="gis" x="10" y="10" />
</canvas>
And the corresponding gmaps.html page content, which is loaded into the iFrame:
<!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>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
function centerMap(lat, lng) {
map.setCenter(new google.maps.LatLng(lat, lng));
map.setZoom(11);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
When the button is clicked, the OpenLaszlo apps calls the function centerMap(lat, lng) in the HTML page, and will center the map to New York. Here's a screenshot of the application in the SWF10 runtime:
I am pretty new to this whole WebWorks stuff (Just started playing around with it today, getting ready for a local blackberry hackathon) and i decided to learn it by action with the google maps api to generate content for me to play with, as well as considering a WebWorks port of a maps app i'm working on for Android.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"" />
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=SNIP&sensor=true&language=es®ion=CO">
</script>
<script type="text/javascript" src="javascript.js">
</script>
</head>
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The CSS:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%
}
And the JS:
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(6.199383, -75.578980),
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
Now my question is: Why doesn't clicking or dragging the map on the Ripple emulator work? [WebWorks BB10] It works wonders on chrome, i can pan, zoom and the markers get placed when i click them.
Thanks.
Edit
The map renders fine on Ripple, but the map itself won't work, nothing happens if i click or drag around with the mouse. The Satellite, Map and zoom buttons do work though
Clicking or dragging the map on the Ripple emulator may not work for a couple of reasons:
There is a runtime error happening and something within the Google
Maps is failing. Try opening Web Inspector (right click on map in
Ripple and select "Inspect Element") to see if there are any run
time errors. It may explain why certain behavior is not working as
expected.
Touch events may not be handled correctly. Try opening Web Inspector (right click on map in Ripple and select "Inspect Element"). Then open the settings (gear in bottom right corner) and select the "Overrides" tab. Make sure that the "Emulate touch events" checkbox is enabled.
Hope that helps.
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</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>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...