Open generated Map with markers in Google Maps - javascript

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.

Related

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)

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!

Leaflet and Cloudmade: merging two examples together

I have been experimenting with cloudmade and leaflet and would like to use a snippet of code from cloudmade into my leaflet code. I have both script tags in my header and define the leaflet map by:
var map = L.map('map').setView([lat, -long], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/APIKEY/STYLE/256/{z}/{x}/{y}.png', {
minZoom:6,
maxZoom: 18,
keyboardZoomOffset:2
}).addTo(map);
The snippet i would like to use from Cloudmade is this: http://developers.cloudmade.com/projects/web-maps-api/examples/custom-map-controls
I have tried to re-build this and implement however with the code it contains CM objects/methods. All i need is 3 links on the map so when the user clicks them it takes them to the lat/long stored. If anyone could guide me this would be great.
I am not a Javascript map pro- but assuming this is not a big issue and is my misunderstanding between the two plugins.
Note: I have took out my API and style ID in this example.
Note: I have also asked on leaflet/cloudmade forums and no replys but many views!
Thank You
Leaflet creator here. Check out the code example on Leaflet API reference page: http://leafletjs.com/reference.html#icontrol
Hope this helps.

Attribution not showing up on google map

So I noticed today that the Google attribution that is suppsoed to be with the map isn't showing up. Is there an easy way for me to put that on the map somewhere manually?
The map is being built using the Javascript v3 api. We're using html5/javascript, jquery and jquery mobile to build the content which apps on iOS and android running phone gap.
var myOptions = {
center: currentLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
};
map = new google.maps.Map(element[0], myOptions);
Thats how I'm setting up my map.
Edit: Found it! The first time I inspected the elements of the page I couldn't find the content for the attribution info but I found it this morning. It seems something else was setting the heigh of my map div which was pushing the copyright info of the screen.
I don't believe there's any way to optionally get rid of the Google attribution in Maps API v3.
If it's just not appearing, that might be a bug in the Maps API. I wouldn't worry about it. Google will fix it if they care deeply about the attribution.
If you really think it's something you're doing and not a bug in the API, post some code and maybe someone can figure out what's up.

Google Maps display KML data

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!

Categories