I'm just starting to use Google Maps API and have run into problems with API. I am using code from Good Maps example and it works with Chrome and Firefox but nothing shows up in IE 10.
I've searched topics without help. I have added https://maps.google.com to safe site in IE, tried the v=3.28 trick, also tried meta tags for backwards compatibility, without any success.
Following is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="map" style="width:100%;height:1200px;"></div>
<script>
function initMap() {
var myLatLng = { lat: 32.681390, lng: -97.108682 };
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
</script>
</body>
</html>
The above markup doesn't show any map in IE 10. I'm unable to move forward. I'm just starting out with this and wanted to use it in an updatepanel in asp.net 4.5. But at the moment, simple html isn't working for me.
Any suggestions?
Thank you.
Related
Inside a infoBubble Google map I have added a function, but the first time the infoBubble is opened, the code not work, and if I open a second infoBubble or close the first and reopen, the code work.
Please help.
This is my page
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
var infoBubble = new InfoBubble();
var infowindow = new google.maps.InfoWindow();
var map;
function initialize() {
var config = {
el: 'map',
lat: 40.2329,
lon: -3.42,
zoom: 10,
type: google.maps.MapTypeId.ROADMAP
};
var data = [
['Giorgio Rossi', 40.15, -3.42, '1' ],
['Marta Bianchi', 40.25, -3.42, '2'],
['Carlo Verdi', 40.15, -3.62, '3'],
['Mario Giallo', 40.25, -3.62, '4'],
];
var map = new google.maps.Map(document.getElementById(config.el), {
zoom: config.zoom,
scrollwheel: false,
center: new google.maps.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markers = [];
var i ;
for (i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][1], data[i][2]),
map: map
});
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>';
google.maps.event.addListener(marker , 'click', function(){
infoBubble.setContent(this.html);
infoBubble.open(map, this);
var prova = this.info;
var found = $(prova).attr('id');
google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
$(".testClass").click(function () {
alert(found);
})
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:700px; height:500px"></div>
</body>
</html>
As you can see from this SO question and the accepted answer
your issue is related to a bug in the infobubble.js code.
More specifically, the placement of the domready trigger was in the wrong part of the code, prior to the asynchronouse setMap() call, instead of after the infobubble elements are added to the DOM in the onAdd() function (which is called after the setMap() function).
What this means is that on your FIRST marker click, at domready event, the elements hadn't yet been added to the DOM - but they were a few milliseconds later - which is why the 2nd marker click worked.
I fixed the domready placement in infobubble.js and created a pull request which has been accepted and is now merged into the official code.
If you update your infobubble.js to the latest commit (use the non-minified for the moment) you'll probably see that your issue is resolved.
Non-working JS Fiddle here using the old code.
Working JS Fiddle here using the new code.
I would like to use the following google map API snippet in my ASP.net application to retrieve the latitude and longitude of the selected point by the user.
This code show the map same as https://www.google.com/maps/#25.3812696,58.4464073,6z. Instead of the map from '.com', I want to see the map from '.ae'.
That is the map same as https://www.google.ae/maps/#25.3812696,58.4464073,6z. Both maps are from google based on the country.
Is there any way to achieve this ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location Tracking</title>
</head>
<body>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(24, 54),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
//this part will return the coordinates to the parent page
alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
});
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
With Thanks and Regards,
I played around with javascript map for a little bit and figured out that by adding &languange=ae at the end of the src, you can have a similar effect. Please check out the example for jsfiddle, and try to add language to your code src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ae". Hope that works for you.
Hi I am new to meteor and I am working on my first application beyond the tutorial. I am coming from a node + express world. I am currently trying to transform an application I built on Node+express using the google maps java script api v3 into a meteor application so that I may be able to distribute it to specific devices. In my trials I got the app working locally on the web by placing my map code into the head element of my html page and it ran as intended. Once I tried to import it onto an android device I received the error :
Uncaught ReferenceError: google is not defined
from that error it led me to this post telling me to move my map code into a Template.rendered function because the meteor script is being run before the google maps api is being loaded which seemed correct. I followed the instructions on that post and I am now being served with a new error stating :
Uncaught TypeError: Cannot set property 'rendered' of undefined
Through googling this took me to this blog post in reference to my error. It states that there is an issue in the order I am loading my html page in. It guides you to change your packages.json file to restructure the order that your files are being served in. The issue here was my packages file is not similarly set up the way hers is and I am having trouble relating it to her file. Any advice would be appreciated I will include code below for my current application.
Html:
<head>
<title>Google Maps App</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&sensor=true">
</script>
</head>
<body>
<template name="maps">
<div id="map-canvas"></div>
</template>
</body>
js:
if (Meteor.isClient) {
Template.maps.rendered = function() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
}
if (Meteor.isServer) {
Meteor.startup(function () {
});
}
packages:
meteor-platform
autopublish
insecure
twbs:bootstrap
fortawesome:fontawesome
jquery
Thank you for your time in advance. Please let me know if there is anything I can include that would be more helpful.
EDIT 1: Currently looking into using this meteor package for googlemaps with javascript api v3 will post updates.
wich meteor version are you using?
run meteor --version and if is under 1.0.4 change the rendered to this(rendered = function() was depurated), now we use onRendered .
Template.maps.onRendered(function(){
//map code here
});
Also you don't need the google.maps.event.addDomListene here, you can do it more like this.
//appName/client/helpers.
initMap = function(){
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
//appName/client/views/map/map.js
Template.maps.onRendered(function(){
initMap
});
But the code its ok. check this junk DEMO
UPDATE
This is how the html should look.
<head>
<title>Google Maps App</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG1mocxosoC9cq-ucFO3vdZCcUxyKa6B4&sensor=true">
</script>
</head>
<body>
{{> maps}}
</body>
<template name="maps">
<div id="map-canvas"></div>
</template>
And the Javascript.
Template.maps.onRendered(function(){
initMap();
})
initMap = function(){
var map;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
I'm trying to do something I thought quite straight forward. Obviously it's not! I use the head.js lib to asynchronously load the Google Maps API :
<!doctype html>
<html>
<head>
<title>Map - Async example</title>
</head>
<body>
<div id="id" style="width:600px;height:400px;"></div>
<script src="header.js" type="text/javascript">
<script type="text/javascript">
head.js('https://maps.googleapis.com/maps/api/js?=3.exp&sensor=false&callback=google_callback');
var google_callback = function ( ) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('id'), mapOptions);
}
</script>
</body>
</html>
But nothing shows up. Any idea/suggestion ?
The closing script-tag for header.js is missing
How to use own map database to display map on a website and use that map to find route and do other stuff ?
You should try the Google Maps API. http://code.google.com/apis/maps/index.html
You can store locations or routes in your database and use the Maps API to display them. Not sure if this is what you're looking for, but I've found their API really easy to use.
That is an absolutely massive task, I'm not sure I understand your question correctly... You've tagged this with Javascript, Web-development and map - so presumably you want to know how to implement a front-end that renders a map to a web page, and then performs custom pathfinding and other logic. Surely I'm misunderstanding you! :D
The O'rielly RESTful Web Services book uses a map service as its operative example throughout the book, so you may find it useful, at least for the design of your service front end. It doesn't delve into the implementation very deeply, particularly the actual mechanics of map image generation, as it is primarily concerned with the design of the service interface from an HTTP perspective. It also doesn't treat very much with the client-side logic that would be involved in dragging, zooming and the like.
You have two options in order to calculate routes depending on your database.
If your database has clean and accurate address names then you can easily use the google maps API that can be found here: https://developers.google.com/maps/documentation/directions/.
Bare in mind that you can only execute 2500 requests per day with the free version.
On the other hand if you have a network defined on your db (have the roads in a nodes and arcs manner) then you can implement Dijsktra's algorithm.
Have a look here: http://www.vogella.com/articles/JavaAlgorithmsDijkstra/article.html
Because of the fact that the network should be loaded from the database in order to calculate the best route I suggest the singleton pattern.
An OpenSource way to do this, which I would recommend in most cases, is using GeoServer and OpenLayers.
GeoServer can read gegraphic data from all the major databases and be used as host for the widely used standard GeographicgWebServices WMS and WFS.
OpenLayers is a JavaScript API to show your map on the webpage.
I recently implemented something like this. I realize it is an old question but Google has the javascript api v3 out for Google Maps and it works great.
https://developers.google.com/maps/articles/phpsqlajax_v3
This page helped me implement the entire system. Works great. You can also use php to update and edit the entries on the map.
You need xml pages and others but here is the map html page just to give you an idea of the javascript it entails.
<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>