Random strange behaviour on Google Maps v2 - google-maps

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

Related

google maps onclick go to marker on map

I'm having issues trying to get my map to go to the marker of a location when a "View on Map" link is clicked. I keep getting the error "TypeError: map.setOptions is not a function".
Here's the code:
var infowindow = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
var infowindow = new google.maps.InfoWindow({
content:'Loading...'
});
var sites = [
['GIC Campers Sydney',-33.935477,151.012108,1,'xxx'],
['GIC Campers Brisbane',-27.5445735,153.0139405,1,'yyy'],
['GIC Campers Melbourne',-37.650735,144.940551,1,'zzz']
];
function setMarkers(map,markers){
var bounds = new google.maps.LatLngBounds();
var image = new google.maps.MarkerImage('/templates/home/images/google-pin.png',
new google.maps.Size(60,60),
new google.maps.Point(0,0),
new google.maps.Point(30,60));
for(var i=0;i<markers.length;i++){
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1],sites[2]);
var marker = new google.maps.Marker({
position:siteLatLng,
map:map,
icon:image,
title:sites[0],
zIndex:sites[3],
html:sites[4]
});
google.maps.event.addListener(marker,'click',function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.setContent(this.html);
infowindow.open(map,this);
});
bounds.extend(siteLatLng);
map.fitBounds(bounds);
}
};
function loadcity(which){
initialize();
if(which == 'gic-campers-sydney'){
var newPos = new google.maps.LatLng(-33.935477,151.012108);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-brisbane'){
var newPos = new google.maps.LatLng(-27.5445735,153.0139405);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-melbourne'){
var newPos = new google.maps.LatLng(-37.650735,144.940551);
map.setOptions({center:newPos,zoom:15});
}
}
jQuery(document).ready(function(e) {
initialize();
jQuery('.updatemap').click(function(e){
e.preventDefault();
});
});
and an example link:
<a onclick="loadcity('gic-campers-brisbane');" class="updatemap" href="#gic-campers-brisbane">View on map</a>
Any help on this would be greatly appreciated.
Your map variable is local to the initialize function. It is not available inside the loadcity function.
One fix is to make it global (like your infowindow):
var infowindow = null;
var map = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
Not sure why you recreate the map (call initialize() every time loadcity runs), you really should only need to do that once.

Centering google map based on user's geolocation

I have a google map (v2) on my website which i use to get user's latitude and longitude to send them as a form. What i need is to make this map initially be centered based on user's geolocation. I understand it's not a practical question but i'm not very familiar with google maps api and all the tutorial's on web are based on google map v3 and i don't want the hassle to migrate to v3 and write all the stuff all over again. So i appreciate it if someone lead me in the right direction to get this feature working on gmap(v2). Here's how my code looks like:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {
draggable: true
});
map.addOverlay(marker);
document.getElementById("b-lat").value = center.lat().toFixed(5);
document.getElementById("b-longt").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function () {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("b-lat").value = point.lat().toFixed(5);
document.getElementById("b-longt").value = point.lng().toFixed(5);
});
GEvent.addListener(map, "moveend", function () {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {
draggable: true
});
map.addOverlay(marker);
document.getElementById("b-lat").value = center.lat().toFixed(5);
document.getElementById("b-longt").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function () {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("b-lat").value = point.lat().toFixed(5);
document.getElementById("b-longt").value = point.lng().toFixed(5);
});
});
}
See my other post: Android maps v2 - get map zoom
To simply zoom in, use:
float zoomLevel = 20.0f;
map.animateCamera(CameraUpdateFactory.zoomTo(zoomLevel);
To zoom to the marker, use:
LatLng l = new LatLng(LATPOSITION, LONGPOSITION); float zoomLevel =
20.0f; map.animateCamera(CameraUpdateFactory.newLatLngZoom(l, zoomLevel));
Add these where you want the zoom to happen.
Note: This is for Java android, you may need to edit it for the web.
I found the solution through navigator object. after initializing the map i found the user's lat&longt with this block of code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
userLatitude = position.coords.latitude;
userLongitude = position.coords.longitude;
center = new GLatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(center, 15);
addMapMarker();
});
if(typeof userLatitude == 'undefined' && typeof userLongitude == 'undefined') {
center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
addMapMarker();
}
} else {
center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
addMapMarker();
}

Plot multiple points on google map using API

I am trying to show different points on any route on google map using the API. I want to pass in starting, stopping and finishing locations. Is this possible using the javascript API or would I need to look into other options such as geolocation?
I am using the following code to achieve this:
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.(-64.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=52554&sensor=false&callback=initialize";
document.body.appendChild(script);
}
Here is my code.
`<script type="text/javascript">
var geocoder = null;
var arr = new Array();
var arr1 = new Array();
var arr2 = new Array();
var map = null;
var chr;
var baseIcon = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng('<%=Request["Lat"]%>', '<%=Request["Long"]%>'), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
baseIcon = new GIcon();
// baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(25, 30);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Creates a marker whose info window displays the letter corresponding to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "markers/marker" + index + ".png";
// Set up our GMarkerOptions object
markerOptions = { icon: letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("<table><tr><td><img src=markers/marker" + index + ".png length=25 width=25 /></td>" + "<td>" + arr2[index] + "</td></tr></table>");
});
return marker;
}
for (var i = 0; i < arr.length; i++) {
var latlng = new GLatLng(arr[i], arr1[i]);
map.addOverlay(createMarker(latlng, i));
}
}
}
`

How to get the Google Map based on Latitude on Longitude?

I want to display Google map in my web page based on longitude and latitude. First user want to enter longitude and latitude in two text box's. Then click submit button I have to display appropriate location in Google map.And also I want to show the weather report on it.How to do that? Thank You.
Create a URI like this one:
https://maps.google.com/?q=[lat],[long]
For example:
https://maps.google.com/?q=-37.866963,144.980615
or, if you are using the javascript API
map.setCenter(new GLatLng(0,0))
This, and other helpful info comes from here:
https://developers.google.com/maps/documentation/javascript/reference/?csw=1#Map
this is the javascript to display google map by passing your longitude and latitude.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Have you gone through google's geocoding api. The following link shall help you get started:
http://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests
Firstly add a div with id.
<div id="my_map_add" style="width:100%;height:300px;"></div>
<script type="text/javascript">
function my_map_add() {
var myMapCenter = new google.maps.LatLng(28.5383866, 77.34916609);
var myMapProp = {center:myMapCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("my_map_add"),myMapProp);
var marker = new google.maps.Marker({position:myMapCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=your_key&callback=my_map_add"></script>
<script>
function initMap() {
//echo hiii;
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(8.5241, 76.9366),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('package');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
// var name = markerElem.getAttribute('name');
// var address = markerElem.getAttribute('address');
// var type = markerElem.getAttribute('type');
// var latitude = results[0].geometry.location.lat();
// var longitude = results[0].geometry.location.lng();
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('latitude')),
parseFloat(markerElem.getAttribute('longitude'))
);
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var package = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
package.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, package);
});
});
});
}
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);
}

Google Map implementation not working on Safari and Chrome

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!