I'm using Google Map API to on my website. When I run my web on local host, Google Map work well but when I deploy my web on OpenShift, Google Map doesn't work? I use java web with Tomcat
My index
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<meta charset="utf-8" />
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="GoogleMapAPI.js" type="text/javascript" charset="utf-8"></script>
<title>Untitled 2</title>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
My js file:
function initialize()
{
var myCenter=new google.maps.LatLng(10.771400, 106.685844);
var mapProp =
{
center:myCenter,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker(
{
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow(
{
content:"NHP Shop <br/> 274/9 Võ Văn Tần P5, Q3"
});
//add sự kiện onclick vào google map marker
/*google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});*/
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
So please tell me what wrong with my code? Thanks so much
Related
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 try to make the tutorial work that geoserver has in its documentation:
http://docs.geoserver.org/stable/en/user/tutorials/georss/georss.html
Since Google maps v2 is deprecated and its keys with it I obtained a v3 API-key via the Google web console and put it in that like this:
<script src="http://maps.google.com/maps?file=api&v=3.x&key=[my key for v3 here]" type="text/javascript"></script>
It shows the map as expected but after a few seconds I get:
Google has disabled use of the Maps API for this application.
and the map is gone.
Could it be, that this tutorial is just severely outdated? So do I need to find a tutorial on using geoserver with Google Maps v3 ?
The way to display RSS layers in the Google Maps API v3 is to use KmlLayer
Example from the referenced documentation:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<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"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338#N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I want to provide a feature like user will provide a city,state and country. Then my aim is to mark the location provided by the user on the google maps.
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 08 Jan 2013 05:31:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<?php
// get and breakdown the results then store them in $var's
$Address = "99999 parkplace, new york, NY";
$urladdress = urlencode($Address);
$Base_url = "http://maps.google.com/maps/geo?q=";
$urlParts = "&output=xml";
$urlrequest = $Base_url . $urladdress . $urlParts;
$xml = simplexml_load_file($urlrequest);
$num = "0";
$value=$xml->Response->Placemark;
$GeoFindAdd{$num} = $value->address;
$GeoFindCords{$num} = $value->Point->coordinates;
?>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(<?php echo $GeoFindCords{$num}; ?>);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
The output of the code is
http://wfs-01.wapka.mobi/300030/300030787_6850a0ae9a.png
Is there something wrong i am doing? Or any other way to mark the location by providing location.
Thanks.
I got the answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 08 Jan 2013 05:31:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var geocoder, map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(10, 10);
var myOptions = {
zoom: 0,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress() {
var address = "Kottayam, Kerala";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>
I'm trying to prototype some plotting on Google Maps API. I've followed the code here and think my code should work, however I get a blank screen. All of the objects have what appears to be the correct data but alas no dice. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key removed>&sensor=false"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(33.001466, -97.354317);
var mapOptions = {
zoom:6,
center:myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
console.log(map);
var routeCoordinates = [
new google.maps.LatLng(33.001466, -97.354317),
new google.maps.LatLng(33.025001, -97.352171),
new google.maps.LatLng(33.033219, -97.341700),
new google.maps.LatLng(33.049321, -97.320414),
new google.maps.LatLng(33.051335, -97.304020),
new google.maps.LatLng(33.059464, -97.298355),
new google.maps.LatLng(33.083919, -97.295609),
new google.maps.LatLng(33.111314, -97.291918),
new google.maps.LatLng(33.136042, -97.289257),
new google.maps.LatLng(33.182818, -97.287111)
];
console.log(routeCoordinates);
var routePath = new google.maps.Polyline({
path:routeCoordinates,
strokeColor:"#000000",
strokeOpacity:.90,
strokeWeight: 2,
editable:false
});
console.log(routePath);
routePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
You map works for me if I remove the key and give the map div a size.
http://www.geocodezip.com/JohnSwaringenSO.html
I have this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="author" content="Salvatore Mazzarino" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- jquery mobile scripts -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile- 1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- my own style sheet -->
<link rel="stylesheet" href="./assets/css/style.css" type="text/css" />
<!-- google maps api script -->
<script type="text/javascript" src="./includes/js_map.js"></script>
<script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>
<body>
<div data-role = "page" id = "map-page">
<div data-role = "header">
<h1>Your position</h1>
</div>
<div data-role = "content" id = "map-canvas">
<!-- here the map -->
</div>
</div>
</body>
</html>
and this js file :
$( "#map-page" ).live( "pageinit", function()
{
// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show coordinates on map
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail()
{
drawMap(defaultLatLng); // Show default map
}
// Find users current position
navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});
}
else
{
drawMap(defaultLatLng); // No geolocation support
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
});
I'm trying to obtain my position.in the html page a mas should appears but nothing apper neither the default map. why? any idea?
Without seeing your live code, it's hard to see if any of the CSS might be causing display issues. However, there are at least two things that need to be fixed:
Your call to the Google Maps API needs to be moved above your own JS file (in the head of the document).
You have an error in your URL that references the Maps API JS file. Change it from:
http://maps.google.com/maps/api/jssensor=false
to:
http://maps.google.com/maps/api/js?sensor=false
I was able to get the map to load and show a marker in the middle of the map.