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
Related
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.
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);
}
The following is my asp.net code for a webpage. The intellisense is NOT picking up any of the google api commands. ie, the google in new google.maps...... is squiggly lined and the map doesnt show on the page. Yes i have a width and height set. Where am I going wrong?
<asp:Content ID="Content1" ContentPlaceHolderID="MidPageContent" runat="server" onload="initialize">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCjtIboyk_zcd4SoE9fzNoGNzt_tIqG8jY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('GMap'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
</script>
<div id="GMap" style="width:400px; height:400px;" >
Sorry about the width, now it's another simple question, are you calling initialize() through <body onload or
google.maps.event.addDomListener(window, 'load', initialize);