I am implementing a google map on the contact page of this website:
http://www.vqt.ch/dev/?lang=fr&page=contact
The map displays in the rectangle on the top of the page. Everything is working fine on Firefox, but nothing is displayed on Safari & Chrome...
Here is the way I implement it:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA8yt4eBY5BILk0ExOfUVIuxTtIfr4IreHJHupahKP7IIqKlsN7BQG4crqM32UzthNoFP_54xDooNNNQ&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function createMarker(point,text) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(text); });
return marker;
}
function load() {
if (GBrowserIsCompatible()) {
var Lat=46.983707;
var Lng=6.904106;
var Zoom=13;
var TextAffiche="<strong>VQT<\/song><br/>Verre & Quartz Technique SA<br/><br/>Rue de Maillefer 11d<br/>2000 Neuchatel";
var map = new GMap2(document.getElementById("contactMap"));
map.setCenter(new GLatLng(Lat,Lng ),Zoom );
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
var point = new GLatLng(Lat,Lng);
var new_icon = new GIcon()
new_icon.image = "http://www.vqt.ch/gmap_marker.png";
new_icon.size = new GSize(50, 32);
new_icon.iconAnchor = new GPoint(0,0);
new_icon.infoWindowAnchor = new GPoint(0,0);
var opt;
opt = {};
opt.icon = new_icon;
opt.draggable = false;
opt.clickable = true;
opt.dragCrossMove = false;
var marker = new GMarker(point,opt);//createMarker(point,TextAffiche);
map.addOverlay(marker);
marker.openInfoWindowHtml(TextAffiche)
}
}
$("body").attr("onload", "load()");
$("body").attr("onunload", "GUnload()");
//]]>
</script>
and here is my html:
<div class="normalContent">
<div id="contactMap" class="borderedImages"></div>
</div>
Do you know what is wrong in there? I really don't understand why it's working somewhere and not working somewhere else...
Thank you for your help!
I restarted from a tutorial and it's now working:
http://www.vqt.ch/dev/google_map_debug/
The main difference is the call of the load function, which now is on the body attributes:
<body onload="load()" onunload="GUnload()">
So I guess the problem was here...
Thank you for your help!
Related
I will really appreciate help for this.
My html v2 file with some temporary key works fine. I am getting locations from some XML, create different colors markers and add some URLs also from XML attributes in Info Window(not too much complicated). Now I need to migrate this to v3. I found some equivalents for functions from v2 but I didn't find for GDownloadUrl( for loading XML) and also GIcon(G_DEFAULT_ICON); Can someone please look at both of my codes and tell me how to change to make this works also in v3. I changed most of the things so if someone can see some error I will be thankful. Thanks in advance.
Version 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA4UDNP6MZ" type="text/javascript"></script>
</head>
<body onunload="GUenter code herenload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new GMarker(point,markerOptions);
GEvent.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
marker.openInfoWindowHtml(alarmanchor);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 41.932797,21.483765), 10);
// Read the data from alarms33.xml
GDownloadUrl("alarms33.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.addOverlay(marker);
}
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
Version 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=3&sensor=false&key=AIzaSyDsa1LyWOQ" type="text/javascript"></script>
</head>
<body onunload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new google.maps.Marker(point,markerOptions);
google.maps.event.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
var infoWindow=new google.maps.InfoWindow();
infoWindow.setContent(alarmanchor);
infowindow.open(map,marker);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapDiv = document.getElementById("map");
var map;
var myLatlng = new google.maps.LatLng(41.932797,21.483765);
var myOptions = {
zoom:10,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
}
//var map = new google.maps.Map(document.getElementById("map"));
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10);
// Read the data from example.xml
GDownloadUrl("alarms44.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.setMap(marker);
}
});
//]]>
</script>
</body>
</html>
As you've noted GDownloadUrl() no longer exists in GMap V3. I'd recommend jQuery.get(url)
I posted an example How to parse xml file for marker locations and plot on map.
UPDATE: As #user1191860 points out below there is a utility for GMap V3 xmlparsing. I was not aware of it. AFAIK, no reason not to use it.
You need to add
<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>
to your html page.
Interesting that the author also includes a jQuery example
EDIT 4
All this while I was thinking that it is the markers problem, that they do not get dragged!
Now I have realized, that NO mouse click works on the map when it is displayed in Qt widget.
The following code, I pasted in an HTML file and opened through Firefox, this worked flawlessly! and the same doesn't respond when I click on the map on QtWidget :rolleyes:
Can anyone confirm this for me or tell me what wrong I am doing?
Google Maps JavaScript API Example
<script type="text/javascript">
var map;
var latlng = new google.maps.LatLng (34.7607233, -117.0107599);
var directionsDisplay = new google.maps.DirectionsRenderer ();;
var directionsService = new google.maps.DirectionsService ();
var pointsArray = new Array();
var arrayToBeReturned = new Array();
function initialize ()
{
var myOptions =
{
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map (document.getElementById ("map"), myOptions);
directionsDisplay.setMap (map);
google.maps.event.addListener (map, "click", function ()
{
alert("You clicked the map.");
});
}
</script>
</head>
<body onload="initialize()" topmargin="0" leftmargin="0">
<div id="map" style="width: 341px; height: 271px"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>
You are looking at the wrong place for the events :) In the references each object have their own events. You can see the ones for markers here:
[http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker][1]
I have used the dragend event plenty of times and it works smoothly.
The code to do it could be:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function () {
document.getElementById("txtLatitude").value = marker.getPosition().lat();
document.getElementById("txtLongitude").value = marker.getPosition().lng();
});
[1]: http://code.google.com/apis/maps/documentation/javascript/reference.html#Markermap = new
Found the solution:
Add this class in the source file where you are "loading" the HTML file (containing Javascript API) in the Qt widget.
class myWebPage : public QWebPage
{
virtual QString userAgentForUrl(const QUrl& url) const {
return "Chrome/1.0";
}
};
Then in your own class in the same source file, add the setPage function call as shown below and see the magic happen!
MainScreen::MainScreen(QWidget *parent):QWidget(parent)
{
...
***map->setPage (new myWebPage());***
map->load (QUrl("./index.html") ) ;
};
google.maps.event.addListener (initialPointMarker, 'click',
function () { map.closeInfoWindow(); });
How about single quotes around the click arguement
I have Google Maps on a website that sets the marker based on an address.
Here's an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/
As you can see there is no marker on the map. But if you scroll upwards the marker is sitting just out of view.
Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there something wrong with my code or is it Google?
Here is my JavaScript Code:
<script type="text/javascript">
$(document).ready(function(){
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>
-
function load(title, address, type) {
if (GBrowserIsCompatible()) {
var map;
var geocoder;
map_id = document.getElementById("map");
map = new GMap2(map_id);
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(24, 0), 17);
map.enableDoubleClickZoom();
if (type == 'sat') {
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GHierarchicalMapTypeControl());
} else {
map.setMapType(G_NORMAL_MAP);
}
geocoder = new GClientGeocoder();
geocoder.getLocations(address, function (response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
//map_id.innerHTML('Could not find address on Google Maps');
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
map.setCenter(point, 17);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Creates one of our tiny markers at the given point
function createMarker(point, index) {
var marker = new GMarker(point, icon);
var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
map.addOverlay(marker);
marker.openInfoWindowHtml(myMarkerContent);
GEvent.addListener(marker,"click",function() {
marker.openInfoWindowHtml(myMarkerContent);
});
}
createMarker(point);
}
});
}
}
If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?
There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.
E.g.- instead of iFrame src="maps.google.com/ etc etc"
have it as src="pages/map.html"
Anyway, this post is 6 months old but better late than never!
For me, the problem was the iframe having size 0 (display:hidden) when the map was loaded. I added a delay to load the map after the iframe was loaded. This race condition could explain why some of the addresses rendered correctly.
Perhaps try this:
<script type="text/javascript">
$(document).ready(function(){
setTimeout("delayedLoad()",100);
});
function delayedLoad() {
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
}
</script>
(thanks to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)
I'm having a particular fight with Google Maps v2 on Chrome. The map is shown well on all browsers except Chrome, that without any particular reason, it does any of these things as you can see on the image:
Moving the center to the south
Showing the markers to the right, but if i move the map, they moved too to the next section of the map.
Perfect
google maps and chrome http://img692.imageshack.us/img692/4961/mapsmisterious.png
I have the following javascript:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var bounds = new GLatLngBounds();
map.enableScrollWheelZoom();
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.removeMapType(G_HYBRID_MAP);
var zoomout = 1;
var pcenter_0 = new GLatLng(40.420300, -3.705770);
var marker_0 = new GMarker(pcenter_0, {draggable: false});
map.addOverlay(marker_0);
marker_0.bindInfoWindowHtml('info', {pixelOffset:new GSize(32,5), maxWidth:200} );
bounds.extend(marker_0.getPoint());
var pcenter_1 = new GLatLng(41.385719, 2.170050);
var marker_1 = new GMarker(pcenter_1, {draggable: false});
map.addOverlay(marker_1);
marker_1.bindInfoWindowHtml('', {pixelOffset:new GSize(32,5), maxWidth:200} );
bounds.extend(marker_1.getPoint());
var pcenter_2 = new GLatLng(48.856918, 2.341210);
var marker_2 = new GMarker(pcenter_2, {draggable: false});
map.addOverlay(marker_2);
marker_2.bindInfoWindowHtml('info', {pixelOffset:new GSize(32,5), maxWidth:200} );
bounds.extend(marker_2.getPoint());
var pcenter_3 = new GLatLng(37.779160, -122.420052);
var marker_3 = new GMarker(pcenter_3, {draggable: false});
map.addOverlay(marker_3);
marker_3.bindInfoWindowHtml('', {pixelOffset:new GSize(32,5), maxWidth:200} );
bounds.extend(marker_3.getPoint());
var pcenter_4 = new GLatLng(48.202541, 16.368799);
var marker_4 = new GMarker(pcenter_4, {draggable: false});
map.addOverlay(marker_4);
marker_4.bindInfoWindowHtml('', {pixelOffset:new GSize(32,5), maxWidth:200} );
bounds.extend(marker_4.getPoint());
zoomToBounds(zoomout);
}
function zoomToBounds(zoomout) {
map.setCenter(bounds.getCenter());
var zoom = map.getBoundsZoomLevel(bounds)-zoomout;
if(zoom < 1) zoom = 1;
map.setZoom(zoom);
map.checkResizeAndCenter();
}
Do you have any idea or clue of what can be happening? It's very annoying to have this random javascript errors.. If you need more info, please ask!
thanks!
Update to add html code (before javascript)
<div id="index_map">
<div id="map"></div>
</div>
I've aldo updated the markers code
I have tried this code on my own appserv localhost. It works well (both the map and the marker). However, when I uploaded it into remote server, the marker doesn't show up. I have no idea what's wrong since I don't even modify the google example code. Any suggestions would be appreciated.
ps. phpsqlajax_genxml2.php works well on the server since I've test by calling it and it return the correct marker's xml format.
(Here's my code)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAw5y75j6U0CGDJO5dXVWsNBQJj0SM6Mv3a5iwK2VJb-LCBMoC8RRKLU5qU6F7IDJ5DMhWA8SbiexiZA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//map.addControl(new GSmallMapControl());
// map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(7.638179, 99.030762), 12);
// Change this depending on the name of your PHP file
GDownloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = GXml.parse(data);
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 GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 170px; height: 250px"></div>
</body>
You probably forgot to change the API key to reflect the remote server's domain name.