Google Maps display KML data - javascript

I have KML string and I want to display that on a Google Map. Instead of a file, I have the string. This is because I have my KML data inside the Fusion Tables, and I need to make something similar to this: https://developers.google.com/fusiontables/docs/samples/custom_markers
I only have KML data, not coordinates, so I'm not sure how I would display that.
I tried this, but it didn't work:
var marker = new google.maps.Marker({
map: map,
position: '<polygon>....</polygon>',
icon: new google.maps.MarkerImage('https://developers.google.com/fusiontables/docs/samples/images/fusion_tables-32.png')
});
Any help is much appreciated!
Thanks!

Take a look at these
The geoxml3 project is an effort to develop a KML processor for use with Version 3 of the Google Maps JavaScript API, it now allows access to individual markers, polylines and polygons, rendered from KML.
Some useful demos with KML

I came across this line: https://developers.google.com/fusiontables/docs/samples/change_infowindow_content
It answered my question!

Related

Open generated Map with markers in Google Maps

I generate a Google Map like the following:
lat_lng = new google.maps.LatLng(51.165691, 10.451526);
mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: lat_lng,
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
also i got multiple markers that are dynamically added to the map. So as far as i know there is no way in my case to do it without the javascript API.
My Question is:
Is there any way to open that generated map (with all options and markers) in google maps? (https://www.google.com/maps/ ...)
... unfortunately it is not enough to just use the fullscreen functionality of maps!
Thanks in advance :)
The correct answer is yes and no.
There is no way to do such thing on the official Google Maps site, however you can create a map in Google's My Maps. The url does start with 'https://www.google.com/maps'. You can easily add your markers via the UI and I believe it also supports some file formats to import a batch of markers easily. I think you can also set some of the options you want.
Here's an example of an existing map created with this technique.
The only other option I know is to use the Google Maps API to create your custom map with all your markers and options, as suggested by other users.
#JonathanChaplin was correct in his suggestion #FalcoB... if I understand you correctly...
Your aim is for a google map to display, and when it does it shows all map markers like this:
To achieve this you need to store information (such as lat and lng values) externally, like for example in a json file. I have done this previously and my bit of code was simply:
//loads the data from json file resulting in markers being displayed
map.data.loadGeoJson('../upload/file.json');
Google has published documentation on this which can be viewed here:
https://developers.google.com/maps/documentation/javascript/importing_data
I think you can't put the map in google maps, but you can display full screen in your webpage.

How to add user images on markers in google maps?

I'm building an angular app in which I require user profile images to be shown on google map as markers.
The location comes from an API as JSON with Lat, long and images of user.
Plus, I'm using clustering in maps. Whenever I click the cluster, the markers with images should appear.
I'm trying it both AGM maps library as well as Google Maps Javascript API
Is there a way to do it?
To use custom markers and use your own images. You simply have to pass the url of your image to the an icon property of the Marker object as below...
var marker = new google.maps.Marker({
position: point,
icon: 'http://contoso.com/image.png',
map: map
});
if you need more control over that image and how it is rendered. Google Maps API provides and icon object specification you can use
var icon = {
url: 'http:contoso.com/image.png',
anchor: new google.maps.Point(0, 0)
}
There are a lot of documentation and examples in Google Maps APIs website
If you don't want to use google maps default marker and want to add custom HTML to markers,
Check this plugin out - https://github.com/googlemaps/js-rich-marker
Really easy plugin to use HTML as google maps markers.
Note - Basically this plugin uses custom overlay as markers. So, compared with default google maps markers, I think using this makes the map becomes a bit heavy to pan around when there are many markers (especially on smartphone)

Leaflet Markercluster do not cluster if geoJSON is MultiPoint

I am facing one issue on leaflet markercluster plugin.
Marker Cluster plugin works perfectly if the GeoJson type is "Point".
But it fails to cluster if the GeoJson type is "MultiPoint".
I found a post here, where it says that it doesn't recursively look into child layers.
I am stuck with this.
Please suggest if there is any work around.
Thanks

How to insert my picture to google maps

i need insert my map picture to my google map with markers, at sites. I have map without draggable, static zoom. Can you help me?
Thanks
So you're trying to lay an image on to google maps, in a specific location? If so, I think this should be able to help you:
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Getting external markers for a new google map

I need to create an instance of a Google map that uses markers from an external Google Map. More specifically I need to grab all the markers from the "source map", run some algorithms and filtering and them add them to my newly created Google Map.
I've tried searching both the Google Maps API and forums for clues, but most of them are about getting markers from the current map, and not externally.
Do I need to use the KML source somehow?
Thanks in advance!

Categories