I made a google map app use google map api v3 and kml file. However, sometime it work, and sometime it always zoom to the max level and center is not mine options.center(near Africa).
Why is it?
And my kml file was uploaded to mine Google Map account.
function initialize1() {
var myLatlng = new google.maps.LatLng(30.566991,114.315491);
var myOptions = {
zoom: 10,
center: myLatlng,
overviewMapControl:true,
overviewMapControlOptions: {
opened:true
},
scaleControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map1= new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
var nyLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms? **************',
{suppressInfoWindows: true});
nyLayer.setMap(map1);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
}
Thanks very much,
That behavior occurs when the kml file doesn't exist/can't be found. You haven't provided the URL of the file to allow testing that.
Another thing to check would be the validity of the file:
http://www.feedvalidator.org/
You could also check the KmlLayerStatus provided by the API to see what it reports.
Related
I've done well by my standards! I have pretty much zero knowledge of JS other than the basics of Functions etc. Ive used these pages to pull together a working script that loads Google Maps into a Modal using the SimpleModal framework. To my relief I got it working but it has one final bug that I cannot shift. The Modal loads on the first click of the HREF but if I close the modal and then try to reopen it it loads the modal with parts of the map missing. The missing map issue was a problem i thought I had already solved. My JS is
var map;
var src = 'https://sites.google.com/site/bristol2monaco/kml/route2.kml';
function initialize() {
var myLatlng = new google.maps.LatLng(51.337890,-0.813049);
map = new google.maps.Map(document.getElementById("basic-modal-content"), {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
clickable: false,
preserveViewport: true,
map: map
});
}
initialize();
and the js file that registers the 'click' contains:
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#table .newbasic').click(function (e) {
$('#basic-modal-content').modal();
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
return false;
});
});
As i thought i had already solved the missing map bug (using solutions posted here) with the (map, resize) line above none of the solutions on here help. Do i have to reinitialise the map or something. Grateful for advice.
When you call the modal to open use the onOpen Function described by Eric Martin. With using his onOpen function you will be able to use the callback feature and thusly use the google map event-listener to listen for the resize event. Once the resize event has been heard, you can reinitialize your google map thusly removing the gray areas
$("#table .newbasic").modal({
onOpen: function (dialog) {
google.maps.event.addListenerOnce(map, 'resize', function() {
//Alert TESTING IF RESIZE is heard(remove after test)
alert("heard resize onOpen");
initialize();
map.setCenter(center);
});
google.maps.event.trigger(map, "resize");
}
});
Morning all.
I'm am currently using the below code to load my Google Map's API V3 at a specific long-lat, it's for a client and I'm wondering if I can load an infoWindow similar to the one the pops up on Google Maps with the business information, review stars etc.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat-long),
disableDefaultUI: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location"),
mapOptions);
var point = new google.maps.LatLng(lat-long);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
</script>
Is this done in a different API? If so could anyone point me to some helpful information?
Sounds like you might be looking for the Places API/Library:
https://developers.google.com/maps/documentation/javascript/places#place_details_responses
Not sure if it has everything you find on Google Maps.
I'm building an application using CakePHP that will store events including the event location. When a user visits the application they will see a Google Map that will get their location and show events near them in the form of little pins that they can click on to view the event details.
I have some questions though:
1.) How would I store the Location in the DB? Would the actual geolocation coordinates be the best bet and how would I make it easy for a user to create an event and enter them.
2.) Once I have the events in place how do I create custom pins with the info pulled from the DB? Example like foursquare:
3.) Whilst getting the users location using HTML5 Geolocation how do I show a little loader on the map again like Foursquare does?
So far I've managed to create the Map and make the controls minified and get the location of the viewer but I'm not sure how do 3 and show a better feedback to the user for the geolocation.
If someone could help me with those other two questions as well it'd be very much appreciated as I'm finding it very confusing so far. Thanks.
var map;
function initialize() {
var myOptions = {
zoom: 8,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
1) Store the actual coordinates of the location and any extra meta data (if you have it) like place name, foursquare_id, date, etc. Storing it this way will make using the data later on straightforward, such as plotting on a map or location name lookup. This will be your Location model.
Create an Event model which you can then associate to a Location. You could hack together some nice interactive functionality using event handlers on your map markers.
Something like: "the user clicks a location on the map, up pops a box asking them would like like to create a new event at this location, marker is added to the map and a form appears where they can populate the event details, etc, etc." You get the idea.
Have a look at the Marker documentation.
2) You can set a custom image for the map markers using ImageMarker Class. Take a look at the huge set of examples for ideas of what's possible.
3) The navigator.geolocation.getCurrentPosition() method as I understand it, is asynchronous. The first argument is the successCallback.
With this in mind, you could set an overlay on your map: "Finding your location", then make the call to getCurrentPosition(). In your successCallback function, you would then hide the overlay.
I've been playing around with the google maps api through javascript (I'm also new to javascript).
I've experimented with adding info windows and markers to the map by following the api examples.
What I want to do is overlay a KML file onto a map of Ireland - and I searched the fusion tables for the KML file contains the information for the borders of the counties of Ireland.
The kml file came from a fusion table here:
http://www.google.com/fusiontables/DataSource?dsrcid=935280&search=ireland+counties&cd=0
I exported it to a kml file and uploaded it to a public site (see javascript - I'm not able to post more than 2 links)
I'm trying to load the kml file in the link below - that map I've selected appears but the KML overlay does not.
http://songsaboutsuperheroes.com/index.html
I've tried using a link to the fusion table ID and had no luck with that.
I've also tried to use the KML Network link and had no luck with that.
So I'm trying to load the KML file directly like I've seen in tutorials.
Can anyone point me in the right direction - I'm not sure what I'm doing wrong - thanks in advance!
Here is the Javascript I'm using:
function initialize() {
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7 ,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLayer = new google.maps.KmlLayer(
'http://songsaboutsuperheroes.com/Ireland_Counties.kml');
myLayer.setMap(map);
}
This works - I accessed the fusion table that holds the kml data directly:
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.FusionTablesLayer(935280, {
suppressInfoWindows: true
});
layer.setQuery("select geometry,name_1 from 935280");
layer.setMap(map);
var kmlUrl = 'http://www.yoursite.com/YOUR_KML_FILE.kml';
var KML_single = new google.maps.KmlLayer(kmlUrl, {color:"#4385F1" } );
KML_single.setMap(map);
EXML_single = new GeoXml("EXML_single", map, kmlUrl, {
sidebarid:"sidebar",
iwwidth:280
});
EXML_single.parse('SOME LOADING TEXT HERE');
At the moment I use Google Static Maps API:
<img src="http://maps.google.com/maps/api/staticmap?center={$listing.City},{$listing.State}&zoom=5&size=145x145&maptype=roadmap&sensor=false"></img>
As you can see I am using Smarty to populate the location with:
{$listing.City},{$listing.State}
I would like to add a marker and zoom control utilizing Google Maps API v3. What is the most efficient way to achieve this? I assume I need to use geocoding?
Thanks
I recently had a project that include a Google Map using API v3. I chose to wrap the API into a jQuery plugin. The API is pretty straight forward. Here is a link to a blog post where I talk about the jQuery plugin. More importantly, you can get the plugin code. That code shows all the details on how to create a map and add markers.
http://blog.bobcravens.com/2010/06/a-google-maps-version-3-jquery-plugin/
Here are a few snippets of importance:
Include the following in your header:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
This snippet creates a map:
var latlng = new google.maps.LatLng(lat, lng);
var settings = {
zoom: options.zoom,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: options.navControl,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var theMap = new google.maps.Map($("#div_id")[0], settings);
To add an overlay do the following:
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: "title"
});
I encourage you to look at the plugin for more details. Hope this helps.
Bob