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');
Related
I am using Markerclustererplus with Google Maps API v3 to ease the display of markers on the screen.
The problem is that I will have several markers in the exact same place (and it should be that way) and I would like to, when clicking on a cluster, to display an info window containing all the markers that were clustered.
I've tried several code and similar questions here in StackOverflow, unfortunately I do not master JS and couldn't solve this.
Markers are pushed into an array with some data:
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image
});
map.markers.push(marker);
When I click an isolated marker, the info window appears ok with a title and an image of that marker:
var infowindow = new google.maps.InfoWindow({
content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
What I would like to happen, is that when clicker a cluster, an info window would open with all of the markers it contains displayed with their corresponding title and image (like, reversing the clustering operation).
Thank you for the help.
Managed to solve this, thanks to the example provided in here.
If anyone is interested, here is how I've done:
First, I've added the markers to the map getting data attributes coming from several custom fields from Wordpress custom posts:
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var marker_image = $marker.attr('data-marker');
var marker_name = $marker.attr('data-title');
var marker_userpicture = $marker.attr('data-image');
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image,
name : marker_name,
userpicture : marker_userpicture
});
map.markers.push(marker);
Created the MarkerCluster:
var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);
Added a click event listener that got the markers from the cluster, their data, created the info window content from that data and finally opened the info window:
google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();
for (var i = 0; i < clickedMarkers.length; i++) {
if(i==0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].name;
var clickedMarkersPicture = clickedMarkers[i].userpicture;
content +=clickedMarkersNames;
content +=clickedMarkersPicture;
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});
I have a simple embedded map using fusion table. For some reason one of the markers disappear on the map and only shows up at certain zoom level. This is happening for newly added record.
I use fusion table query to load the map.
function initialize() {
var myoptions = {
center: new google.maps.LatLng(19.07621, 72.87766),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var locString = $.jStorage.get("loc");
map = new google.maps.Map(document.getElementById('map-canvas'),myoptions);
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'Name'",
from: '19uKyFR_QRg0oRyE0RetwgSIUbAJtOJCxu3vd3dE',
where: "'City' = '" + locString + "'"
},
map: map
});
}
This query shld return one marker. It only appears at certain zoom level
FT servers need up to 1 minute to cache new records on all zoom levels. You might have hit this limitation.
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 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.
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