I have html code for Google maps. I would like to add my custom location to the code but i cant figure out how. i did some research and to add custom locations you need to add kml file. I do not know how to do so. can someone help me? Bellow is my map code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Layer on Zoom in Google Fusion Tables</title>
<style>
#map_canvas { height: 550px; width: 825px; }
</style>
</head>
<body>
<input type="text" id="address" ></input><input onclick="geocode_address();" type="button" value="Zipcode"></input>
<div id="map_canvas"></div>
<script src="http://maps.google.com/maps/api/js?…
<script>
var map, countyTable, tractTable, ctyLayer;
var tractLayers = [];
var infowindow = new google.maps.InfoWindow({});
var geocoder = new google.maps.Geocoder();
function geocode_address() {
var address = document.getElementById('address').value…
geocoder.geocode( { 'address': address}, function(results, status) {
map.setCenter(results[0].geometry.locati…
map.setZoom(map.getZoom()+8);
});
}
function addClickHandler(FTLayer) {
google.maps.event.addListener(FTLayer, "click", function(event) {
infowindow.setOptions({pixelOffset:event…
content:event.infoWindowHtml,
position:event.latLng
});
infowindow.open(map);
});
}
map = new google.maps.Map(document.getElementById(… {
center: new google.maps.LatLng( 36.315125,-95.273437…
zoom: 4,
mapTypeId: "roadmap",
streetViewControl: false
});
</script>
</body>
</html>
Here is the kml example code:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Example</name>
<description><![CDATA[Location update]]></description>
<Style id="style1">
<IconStyle>
<Icon>
<href></href>
</Icon>
</IconStyle>
</Style>
<Style id="style3">
<IconStyle>
<Icon>
<href></href></href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style2">
<IconStyle>
<Icon>
<href></href></href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Chase</name>
<description><![CDATA[<div dir="ltr&quo
I have been trying to figure out how to do it can you help me?
Related
I need do embed a kml google earth map in my webpage.
I followed this instructions, but the link to get the code to embed doesn't seem to be activated here.
I also tryed the followning code, but it shows a simple map without the informatons in the kml file
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#google-map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'poligono1.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="google-map" class="google-map"></div>
</body>
i put the kml file in the same folder of the webpage.
Thanks in advance for helping me!!!
i tried the scaisEdge code, and it works fine.
but in iis were missing the mime type, then i added the mime type, and now it works fine... thanks geocodezip!!!
I think this sample from google developer could be useful
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
/**
* #fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* #param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
How to retrieve all existing markers on the public map created by me in javascript.
In html I am adding following tag.
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=zJ463bGh1PYM.kWHWVlcByQeU" width="640" height="480"></iframe>
Now I want to extract all the markers present on this map in Javascript.
Please help me in this.
click on the
choose "Download KML"
check the "Keep data up to date with network link KML (only usable online)."
rename the resulting .kmz file as .zip
open the contained .kml file
<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
<name>Untitled layer</name>
<NetworkLink>
<name>my-map</name>
<Link>
<href>http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4</href>
</Link>
</NetworkLink>
</Document>
</kml>
that contains the external link to the KML that describes your map (http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4). Load that on a Google Maps Javascript API v3 map using KmlLayer.
working code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4",
map: map
});
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style=border: 2px solid #3872ac;"></div>
I use kmz branch of geoxml3 to simple render geo date from kmz file. But it works not well. Placemarks are rendering fine, but I cant see any overlays. This is my code:
$doc->addScript($this->baseurl.'/components/com_google_map/assets/ZipFile.complete.js', 'text/javascript');
$doc->addScript($this->baseurl.'/components/com_google_map/assets/geoxml3.js', 'text/javascript');
$doc->addScript($this->baseurl.'/components/com_google_map/assets/ProjectedOverlay.js');
<script type="text/javascript">
google.load("earth", "1");
var myMap;
var minZoomLevel = 3;
var geoXml;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(55.01, 82.85),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
geoXml = new geoXML3.parser({map: myMap, afterParse: showGeoData});
geoXml.parse('/components/com_google_map/soil_moisture/soil.zip');
}
function showGeoData(doc) {
console.log(doc);
geoXml.showDocument(doc);
};
</script>
And this is kml:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<name>Soil_Moisture</name>
<description>Retrieved soil moisture value
SM_OPER_MIR_SMUDP2_20120916T130233_20120916T135546_551_001_1</description>
<GroundOverlay>
<name>Raster data</name>
<visibility>1</visibility>
<LatLonBox>
<north>90.0</north>
<south>-90.0</south>
<east>180.0</east>
<west>-180.0</west>
<rotation>0</rotation>
</LatLonBox>
<Icon>
<href>overlay.png</href>
</Icon>
</GroundOverlay>
<ScreenOverlay>
<name>Legend</name>
<Icon>
<href>legend.png</href>
</Icon>
<overlayXY x="0" y="1" xunits="fraction" yunits="fraction" />
<screenXY x="0" y="1" xunits="fraction" yunits="fraction" />
</ScreenOverlay>
</Document>
</kml>
Both of png files were included at kmz. And there are no errors or warnings in console.
Could anyone help?
P.S. Sorry for my english.
my goal is to be able to load markers from an sql database and display them on a googlemap. but im having a hard time just trying to read markers from an xml file.
Here is my HTML file
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadXMLFile(){
var filename = 'markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
container = new nokia.maps.map.Container();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new nokia.maps.geo.Coordinate
(parseFloat(lat), parseFloat(lng));
container.objects.add(new nokia.maps.map.StandardMarker(
markerCoords, {text:nme}));
});
map.objects.add(container);
map.zoomTo(container.getBoundingBox(), false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
and this is my xml file
<?xml version="1.0"?>
<markers>
<marker>
<name>M1</name>
<address>Abbey Street</address>
<lat>53.3496</lat>
<lng>-6.257</lng>
</marker>
</markers>
The map is rendering but no marker is appearing on the map. I have google searched this problem but cant find anything that helps.
you are not calling loadXMLFile()
you aren't including the jquery library
you aren't creating google.maps.Markers (looks like you have syntax from some nokia API instead).
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map = null;
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
loadXMLFile();
}
function loadXMLFile(){
var filename = 'v3_SO_20140124_markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new google.maps.LatLng(parseFloat(lat),
parseFloat(lng));
bounds.extend(markerCoords);
var marker = new google.maps.Marker({position: markerCoords, map:map});
});
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
working example
i'm using geoxml3 to parse my kml file.
this works so far.
now i'm trying to cluster these files so the map is not full of markers at low zoom levels
my kml file looks something like this (of course more markers(up to 200))
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Placemark id="1">
<name>test1</name>
<Point>
<coordinates>10.5267012, 49.6812452</coordinates>
</Point>
</Placemark>
<Placemark id="2">
<name>test2</name>
<Point>
<coordinates>30.5267012, 24.6812452</coordinates>
</Point>
</Placemark>
</Document>
</kml>
here is my code in my index.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test123</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 src="lib/geoxml3.js"></script>
<script>
function clickMarker(i) {
google.maps.event.trigger(markers[i], "click");
}
function initialize() {
var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
var mapOptions = {
zoom: 3, //set default zoom level
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
var mcOptions = {gridSize: 50, maxZoom: 15};
markers = [];
markerclusterer = new MarkerClusterer(map, [], mcOptions);
var infoWindow = new google.maps.InfoWindow({maxWidth: 800});
var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
map: map, singleInfoWindow: true,
createMarker: function(placemark) {
//Constructing marker for each Placemark node, and then add it to the markclustere
var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
var marker = new google.maps.Marker({position: point});
markerclusterer.addMarker(marker);
google.maps.event.addListener(marker, "click", function() {
var marker_lat = marker.getPosition().lat();
var marker_lng = marker.getPosition().lng();
infoWindow.close();
infoWindow.setOptions({maxWidth: 800});
content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markerclusterer.addMarker(marker);
}
});
myParser.parse('./kml/point-load.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
so my question: why are the markers not clustered and not displayed even without clusters???
I get this error with your code:
Uncaught ReferenceError: MarkerClusterer is not defined
Because you aren't including the MarkerClusterer external library that defines that.
working example from your code (but not your KML as that wasn't provided)