I am putting a google map on my web site and I wanted to add points to the map but I am not sure how to do it. I have tried a few different things but they did not work. Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=myKeyHere"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.8163, -98.55762), 4);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 750px; height: 500px"></div>
</body>
</html>
This page should get you going
The Google Maps API shows information on how to do this. Basically do:
var point = new GLatLng(latitude,longitude);
map.addOverlay(new GMarker(point));
I used this plugin (it uses Google Map V3 as V2 is deprecated)
http://blog.bobcravens.com/2010/06/06/AGoogleMapsVersion3JQueryPlugin.aspx
it also requires jquery(which makes things easier). It has methods such as
map.addMarkerByLatLng
or
map.addMarkerByAddress
Hope that helps!
Related
When I use the google search api example from here
It doesn't show me any results for Images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google Web Search API Sample</title>
<script src="https://www.google.com/jsapi"
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load('search', '1');
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.PatentSearch());
// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("VW GTI");
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>
The option is there through this line
searchControl.addSearcher(new google.search.ImageSearch());
However the results say 0.
Shouldn't there be at least a couple of images? I think a couple of weeks ago when I tried it, it still worked?
Any idea?
I know that I can add OpenStreetMap or Google Maps as basemaps in a web page. However, I am looking for a basemap that enhances the oceans. Is it possible to add an Esri ocean basemap to my html and javascript code? If so, where could I find the code?
EDIT: I have worked up some code. The map doesn't show up when I open it. What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 630px"></div>
<script>
var map = L.map('map').setView([54.296500, -2.209221], 5);
L.esri.basemapLayer('Oceans').addTo(map);
var popup = L.popup();
</script>
</body>
</html>
You would do it very similarly to your (HTML + JS) map that would have used OSM or Google Maps.
The idea is to use Leaflet mapping library, then load the correct tile source (ESRI Oceans in your case).
You can follow the example directly on ESRI-Leaflet plugin: http://esri.github.io/esri-leaflet/examples/showing-a-basemap.html
The list of available ESRI basemaps is there: http://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html
Note that there are Terms of Use for using ESRI basemaps: https://github.com//Esri/esri-leaflet/wiki/FAQ#what-are-the-terms-of-use-for-esri-map-tiles
I have this page that uses Google Maps Javascript API (extPage.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var cord = new google.maps.LatLng(28.545078,-81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>
</html>
That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#LoadBut").click(function() {
$("#extDiv").load('extPage.php');
});
});
</script>
</head>
<body>
<input type="button" id="LoadBut" value="Load">
<div id="extDiv"></div>
</body>
</html>
When I run it just like this I get an error ReferenceError: google is not defined. I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. The error message goes away but the map does not load.
I've never been to sure about the best way to handle Javascript on a page inside of a div like this.
Any help with this would be great.
Thanks!
From what I understand of your requirements, you can use the
Google Static Maps API, whcih does not require any JavaScript.
You just place an img tag with a reference to a static map url into your page with the appropriate parameters. For your example:
<div id="extDiv">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>
See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project.
If you have something like the code below, it is impossible to access any node type below the head tag. I am guessing the reason is the JavaScript code executed before the rest of the document was created. But is there a way to access these nodes from the head tag. I want to access them from the head tag because I like my JavaScript code to be in one location if possible. I know jquery uses $(document).ready(). Is there something similar to that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var div = document.getElementById('myDiv')
alert(div)
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
The simplest analog to jQuery's $(document).ready() is window.onload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
It is not as good because it will wait until all images are downloaded before it fires. If you must have the equivalent, you could use a microlib such as this one.
"I like my JavaScript code to be in one location if possible"
Yes: An external js file. It is bad practice to write js in the head. In the same way that writing styles in the head is poor. Hopefully you are using jquery for more than just the ready event, but it is an invaluable initializer even if you aren't. Write your js in a separate file, hopefully in some type of a container so you don't clutter the global namespace, and initialize it with $(document).ready();
You must wait for the 'onload' DOM event. jquery $(document).ready() is a wrapper for setting event handlers for onload.
Without jQuery you might try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function do_onload() {
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>
Well as a general rule i tend to put all inline js at the end of the document anyway, only externals do i usually put in the head. However, you can use the same methods jquery uses. I dunno exactly what the jq source looks like but something like this should work (untested):
window.onDomReady = function (fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", func, false);
} else {
document.onreadystatechange = function(func){
if(document.readyState == "interactive") {
fn(func);
}
}
}
};
And then you would use it like:
window.onDomReady(function(){
// do your stuff
});
I dunno if thats completely cross browser compatible either... that would be on of the benefits of using something like jQuery instead of writing your own.
I'm trying to use Bing Maps 7.0 API with Lazy Loading, as this seem to be supported with the onScriptLoad parameter. I used this minimal test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing Maps Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div>
<script type="text/javascript">
function initMap() {
console.log('Callback called');
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"<API KEY>"});
}
function loadMapControl()
{
var script = document.createElement("script");
script.setAttribute("src", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onScriptLoad=initMap");
script.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(script);
console.log('Tag appened');
}
setTimeout(loadMapControl, 1000);
</script>
</body>
</html>
The callback is called as expected, but Firebug throws me an Microsoft.Maps.Map is not a constructor error. This even if I delay the map creation by 10 seconds after the callback is called via setTimeout.
The simple example in Bing docs, however, is working perfectly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing Maps Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div>
<script type="text/javascript">
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:",API KEY>"});
</script>
</body>
</html>
Has anybody succeeded in getting the API 7.0 to work with lazy loading?
Thanks.
FYI, this issue has finally been fixed in the newest release of the Maps API.
Everything is working as expected with this new version.