What's wrong with this google map, api 3 implementation issue - javascript

I have written something similar to this in the past using an older version of the google maps api I want to add some geocoding with some autocomplete using the api3. But my map won't even load in. The map will load in only if I take the map options and the geocoder off. Why is this?
function mapLoad(){
jQuery(function($) {
$('#map').animate({height:300,width:300,opacity:1},1500);
});
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
};
// Define map
map = new google.maps.Map(document.getElementById("map"),mapOptions);
// Define Gecoder
geocoder = new google.maps.Geocoder();
window.alert("no errors with map load");
}
EDITED neither the geocoder or the options work
i used this as a reference purely because it looks simple.

Where are you calling mapLoad? I assume in body onload. I setup this jsbin without issue. Does it help?

Related

Google Maps Api inverts KML Layer after Zoom

I do have a strange Problem with Google Maps API and a KML file.
When i initialize the Map with KML, everything works like charm.
Now my problem: After zooming into the map (zoom Level 10) the KML Layer inverts.
Here is the example:
var settings,map,marker,infowindow,consultant_fname,consultant_lname,consultant_zip,consultant_city,mapOptions;
var markers = [];
$(document).ready(function(){
mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.643186, 13.760376),
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
streetViewControl: false,
panControl:true,
panControlOptions : {
position: google.maps.ControlPosition.RIGHT_TOP
},
};
map = new google.maps.Map(document.getElementById('gmap'),mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://www.creditnet.at/austria_3.kml',{
preserveViewport: true,
suppressInfoWindows: true,
map: map,
});
ctaLayer.setMap(map);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="gmap" style="width:700px;height:700px;"></div>
Hopefully anyone can help me.
Regards M.
Seems like a bug in the KML renderer.
As a workaround, you could use a third party KML parser (like geoxml3 or geoxml-v3), geoxml3 doesn't seem to have that artifact:
Example using geoxml3 (and a slightly modified KML to cover the whole world)
Note that for complex KML the tiled based rendering of KmlLayer will be more efficient and you may run into performance issues with the 3rd party parsers.

Google maps autoload hidden place in marker location

Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.

Function to turn KML layer on/off

This is my first time posting here. I am new in working with Javascript or Google Maps API. I have a map with one KML layer, and I want to create a checkbox that will turn the layer on or off when clicked. I have seen a lot of examples on the web, but nothing seems to work in my application. Here is the code:
(function() {
window.onload = function() {
var options = {
center: new google.maps.LatLng(44.65, 22.64),
zoom: 10,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map'), options);
var kmlUrl = 'http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.kml';
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: false,
};
var trasee = new google.maps.KmlLayer(kmlUrl, kmlOptions).setMap(map);
}
})();
I have no idea what function to create to toggle the visibility of the layer, altough I've created a checkbox in the HTML file:
<input type="checkbox" id="straturi" onClick="togglefunction()" />
Could you give me any advice?
Best regards,
Alexandru
The toggle function should be something like
var toggleKml=function(layer) {
if(layer.getMap()===null) {
layer.setMap(map)
} else {
layer.setMap(null)
}
};
And it needs to be defined in the same context as map and trasee, otherwise it won't see those objects. In your case, you would call it with trasee as parameter
toggleKml(trasee);

How to add basic directions on marker right-click like maps.google.com

See this screenshot to see what I'm going for. Just like it is on maps.google.com, I'd like to right click on the marker and have it bring up an option for directions. I'm trying to look through the Google Maps API3 Developer's Guide, but I'm having trouble finding a solution. Here's my current code:
function initialize() {
var myLatlng = new google.maps.LatLng(38.578809, -121.493758);
var mapOptions = {
zoom: 14,
center: myLatlng,
streetViewControl: false,
scaleControl: true,
scrollwheel: false,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
}
}
var map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Project Church Downtown'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What you are asking for appears simple but actually requires quite a bit of work.
I suggest looking at this reverse geocoding guide:
https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding
as well as this directions service guide:
https://developers.google.com/maps/documentation/javascript/directions
Directions service example:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
You will need to determine the start point, either from a mobile user's current GPS or a desktop users approximate location using HTML5 geolocation. And then process the end point clicked and route the two locations.
For starters you can get the coordinates for a rightclick event.
google.maps.event.addListener(map, "rightclick", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
});

Remove Pan control in Google Maps API V3

Is there any way to remove the circular panning navigation control but keep the zoom control in the Google Maps V3 API? I've tried forcing it offscreen with jQuery but every time the map is updated it comes back. Any ideas? Thanks!
You may also have a look in here, you can remove/add specific controls when you declare your map:
var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Taking Control of the Google Maps API V3 Controls
You can use google.maps.NavigationControlStyle.SMALL to display a small plus/minus zoom control, otherwise you'll have to create your own zoom control and add it to the map.
http://code.google.com/apis/maps/documentation/javascript/controls.html
In V3, when you define your options - you have the option of disabling/enabling any UI features:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
//panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

Categories