I want to parse a simple marker from a KML so i have been making some tests with geoxml3, everything goes perfect if I use (import) the 'polys/geoxml3.js' library, but if I change it to 'kmz/geoxml3.js' (because later I want to use some extendedData) I get this error 'Cannot read property 'setAnimation' of undefined' . How can I solve it but using the 'kmz/geoxml3.js' library?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geoxml3</title>
<style>
html{height:100%;}
body{height:100%;margin:0px;}
#map_canvas{height: 90%;width: 90%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
var geoXml=null, map=null;
var infowindow = new google.maps.InfoWindow({});
function initialize() {
var myOptions = {
center: new google.maps.LatLng(39.397, -100.644),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createMarker: addMyMarker,
singleInfoWindow: true,
suppressInfoWindows: true
});
geoXml.parse('exampleMarker.kml');
function addMyMarker(placemark,doc) {
var marker = geoXml.createMarker(placemark);
marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(placemark.description);
infowindow.open(map,marker);
});
doc.markers.push(marker);
return marker;
};
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
My KML file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>Chicago Bike Parking</name>
<description>A map of 20 bike parking.</description>
<Style id='bikeParkingIcon'>
<IconStyle>
<color>ffffffff</color>
<colorMode>normal</colorMode>
<scale>1.0</scale>
<Icon id='bikeParking'>
<href>icono.png
</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>2024 S Western</name>
<address>2024 S Western Ave, Chicago, IL 60608</address>
<phoneNumber></phoneNumber>
<description>1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.</description>
<visibility>1</visibility>
<styleUrl>#bikeParkingIcon</styleUrl>
<Point>
<coordinates>-87.685871,41.854533,1000</coordinates>
</Point>
<TimeStamp><when>2009-07-24</when>
</TimeStamp>
<ExtendedData xmlns:cdot="http://www.chicagobikes.org/data">
<cdot:locName>Salvation Army</cdot:locName>
<exampleTag>My data</exampleTag>
</ExtendedData>
</Placemark>
</Document>
</kml>
So far this is my solution using a 'custom' createMarker function, this way you can use and define your own marker properties/options.
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createMarker: addMyMarker,
singleInfoWindow: true,
suppressInfoWindows: true,
afterParse: useTheData
});
geoXml.parse('exampleMarker.kml');
function addMyMarker(placemark,doc) {
var marker = new google.maps.Marker({
title: placemark.name,
position: placemark.latlng,
map: map,
//This case href is the tag in my KML
icon: placemark.style.icon.href
});
google.maps.event.addListener(marker, 'click', function() {
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(placemark.description);
infowindow.open(map,marker);
});
//doc.markers.push(marker);
return marker;
};
function useTheData(doc){
$.each(doc[0].placemarks, function(index, value) {
//Something
});
};
in your description tag i noticed have an html anchor tag but is not being read as html
<description>1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.</description>
you can encapsulate it inside so it should look like this
<description><![CDATA[1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.]]></description>
Related
Hi i'm new with HERE and i'm having trouble to use the map api for javascript. I followed this tutorial https://developer.here.com/documentation/maps/3.1.35.3/dev_guide/topics/quick-start.html and it doesn't work.
I have the 403 error in the dev tools like below.
Here is the response in the dev tools in the network page
Reponse
This is how I add the js file for HERE
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
Here is my code I tried to show the map
var platform = new H.service.Platform({
'apikey': '{my_key}'
});
// Obtain the default map types from the platform object
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) the map
var map = new H.Map(
document.getElementById('Map_Content'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: CenterMap//param created before but its an object with lat;lng
});
The last thing I'm doing that i'm not sure is in the Here platform I added a project and I put the service, but I couldn't find the one in the tutorial (Maps API service(s)) so I added the service HERE Map Attributes instead
Please try with the below example of map at the specified location.
/**
* Moves the map to display over Berlin
*
* #param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(map){
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
}
#map {
width: 95%;
height: 450px;
background: grey;
}
#panel {
width: 100%;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Map at a specified location</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
<body id="markers-on-the-map">
<div class="page-header">
<h1>Map at a specified location</h1>
<p>Display a map at a specified location and zoom level</p>
</div>
<p>This example displays a movable map initially centered on the <b>Brandenburg Gate</b> in the centre of Berlin <i>(52.5159°N, 13.3777°E)</i></p>
<div id="map"></div>
<h3>Code</h3>
<p>
The <code>map.setCenter()</code> method and <code>map.setZoom() </code>method are able to control the location of the map.<br>
</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
To access the HERE map you need to have below script in the html page.
The same is defined in the api spec.
https://developer.here.com/documentation/maps/3.1.37.1/dev_guide/index.html
I literally just copy and paste the example code from the API documentation (link: https://developer.here.com/cn/documentation/maps/hls-chn/topics/quick-start.html)
and I put in my own app_id and app_code into the appropriate lines (for obvious reasons I cannot disclose my api key and code; sorry).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': '{YOUR_APP_ID}',
'app_code': '{YOUR_APP_CODE}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
However, the browser reported the following errors: screenshot of errors in console:
This is what the webpage looks like: the map does not display
The errors are confusing because the code snippet was not written by me, but directly copied from HERE Map's developer documentation. Your help is much appreciated. Thank you.
If you are using freemium plan then probably you should follow this documentation-
https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html
and the below code-
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': 'Your_api_key'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
I'm updated Maps API for JavaScript to 3.1v. After that Raster map doesn't show correctly. After some zooms getting not a clear picture and problems with the font. Actual:
I've tried to put some different pixel ratio and another map types but it didn't help. Is there a bug?
This is how I init map:
var platform = new H.service.Platform({
'apikey': apiKey,
});
$scope.defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
pois: true
});
$scope.geocoder = platform.getGeocodingService();
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng }
});
$scope.markerGroup = new H.map.Group();
$scope.map.addObject($scope.markerGroup);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents($scope.map)); //Step 3: make the map interactive
$scope.ui = H.ui.UI.createDefault($scope.map, $scope.defaultLayers); ```
**Please check imgs:**
Actual: https://i.stack.imgur.com/Vu17g.jpg
Expected: https://i.stack.imgur.com/Tcid8.jpg
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Refs:
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
Add pixelRatio parameter next to zoom & center:
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng },
pixelRatio: window.devicePixelRatio || 1
}
);
and disable fractional zoom on Behavior as well as ZoomControl UI (which is enabled by default in v3.1):
behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
$scope.ui.removeControl('zoom');
$scope.ui.addControl('zoom', new H.ui.ZoomControl({
fractionalZoom: false,
alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
}));
For more details see documentation for map options: https://developer.here.com/documentation/maps/topics_api/h-map-options.html#h-map-options
ZoomControl Options:
https://developer.here.com/documentation/maps/topics_api/h-ui-zoomcontrol-options.html
and Features to be disabled on Behavior: https://developer.here.com/documentation/maps/topics_api/h-mapevents-behavior-feature.html
Please add below libraries and try to run it, also share the libraries that has been used in the code.
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
type="text/javascript" charset="utf-8"></script>
I'm trying to create a map of Stockholm subway on Google maps.
I have created a KML file to the blue line http://tourist-sweden.se/transport/map/sthlm/t-11-bana.kml
I call this file with this JavaScript code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Map of Stockholm's subway: line Nr.T-11 "Akalla - Kungsträdgården"</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var subwayblue = new google.maps.LatLng(18.032405,59.334372);
var mapOptions = {
zoom: 10,
center: subwayblue,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://tourist-sweden.se/transport/map/sthlm/t-11-bana.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But not showing the path between the stations. What is my fault?
Your polyline doesn't have a valid color:
http://feedvalidator.org/check.cgi?url=http%3A%2F%2Ftourist-sweden.se%2Ftransport%2Fmap%2Fsthlm%2Ft-11-bana.kml
Hi iam trying to put buttons in the infowindow and when i click the button some action should takeplace atleast an alert.below is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(12.98,77.59),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infoWindow = new google.maps.InfoWindow();
(function() {
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(12.98,77.59)
});
var content = "<div id='tabs'>"+
"<form id='button'>"+
"<div>"+
"<input type='button' onclick='alert(infoWindow)'>"+
"</div>"+
"</form>"+
"</div>";
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
})();
};
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:400px; height:300px"></div>
</body>
</html>
here i can add the button but not able to make it work..Any help would be appreciated
you pass the value in the alert() as variable not as string. You need to pass this within single or double quote
var content = "<div id='tabs'>"+
"<form id='button'>"+
"<div>"+
"<input type='button' onclick='alert(\"infoWindow\")'>"+ // here
"</div>"+
"</form>"+
"</div>";
now try with this.
If you want to get more out of InfoWindows and put HTML content in them I would recommend trying InfoBox. Check out the reference here
It has some of the additional things like closing the window build in.