Been trying to get my head around this for some time although clearly i'm missing something
what i am trying to do is not draw a new map although provide a src link to say (https://www.google.com/maps/d/u/0/embed?mid=1xI_dALvs0A-oySG-dkf4BYeDyBk) to something of the below
https://developers.google.com/maps/documentation/javascript/styling
I want to embed my custom map with the markers to my site and styling it
I guess map = new google.maps.Map(document.getElementById('map') has something to do with the drawing of the new map although not too sure as to take it out or what.
is there anyway to use the custom map + .json code rather than hard coding an array of poi's as would like to rely on it pointing through to the custom map link for the markers
is there any better way to get around this
Google Maps JavaScript API can load data that were stored in GeoJSON format. So you have to look into GeoJSON specification and create corresponding file for your markers (or polylines, polygons, etc.).
The Google Maps JavaScript API documentation explains how to load the GeoJSON data via Data layer of maps:
https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
You should combine the styling example with GeoJSON example from the documentation to achieve your goal.
Here is the github link - https://github.com/hpi1hpi/custom-google-map-with-json
Add google map with custom color and data from JSON with slider
Related
How can we create a google static map with a custom polyline overlay?
I need to create a map image, which has to be embedded into a pdf report. The basemap will be google, and on top of that, we need to show the markers and polylines.
I could see some docs to include marker while creating google static maps. but couldn't figure out a solution for including custom polyline on that. I've the polyline data in my database as geojson and can change it to any other defined format if required, from a nodejs api.
Could anyone suggest a solution for this?
Thanks in advance
I'm making a website that has an embedded google map (iFrame) that has multiple place names on it that I set up in My Places. What I want is to be able to list the place names and addresses down the side of the map like it does in My Places.
Obviously I can just export the KML data of the map but I want the page to automatically update when a new place is added to the My Places map without having to export a new file.
If Google still supported RSS feeds I would probably use that, but the current API seems to need to rely on URL requests.
Any help or suggestions are appreciated!
I don't think you can do this with an embedded map. You can add a sidebar to a map from MyPlaces using the Google Maps API v3, a third party KML parser like geoxml3 and a proxy.
example
I am trying to embed an existing, public Google Map into a website. Specifically this one:
http://goo.gl/maps/cHf2
Of course I could use the iframe embed to achieve this, but I would like a little more control over the map … I imagined being able to pull all the markers from the map and display them as an index next to the map. Kind of like Google already does, but embedded in my page with my own styles and images.
I have been digging through Google, Stack Overflow and the API instructions and couldn’t find any relevant posts. In the GET string of the map on Google we can see this chunk:
&msid=212828439842926497866.0004bfae4da003d8ffd1f&mid=1341413217
I thought in there might be a maps ID and I could use it to query the content of the map through the API? The intention is using Google Maps as a CMS for less technical minded people and not dealing with geo data in our own CMS.
Any help would be greatly appreciated. Maybe I am just missing the forest for the trees.
You can download the kml that specifies the markers in that page and display that on your API based map. This example defaults to displaying it using geoxml3, but you can hide that and display the KmlLayer version.
You should be able to just point KmlLayer to the link (I downloaded the kml and put it on my server so it would work with geoxml3).
Here is an example (taken directly from the documentation) that does that
here is the original
I have been doing so much research and yet to find the exact answer to help me. I need to convert my map at http://www.uaf.edu/campusmap/ from V2 to V3 so I can try to combine it with my fusion tables. It uses tiles made by Map Tiler. Is there anyone who can help me out?
I guess you need to port the whole map to V3 and use Custom Map Types.
BTW, you're loading the API twice, once from http://www.uaf.edu/files/campusmap/ and then again from http://www.uaf.edu/files/campusmap/campusmap-122311.html -- which is loaded in an iframe. Probably better to remove one of them, I think you can get rid of the first one.
I think there are two main things you'll need to worry about when converting to v3:
GTileOverlay doesn't exist in v3. You can use Custom Map Types, as per the pp.
To do this, you'll want to make an ImageMapType (see the docs). You'll then need to add this to the Map.overlayMapTypes MVCArray (which will display it above the base map - Map reference).
There's nothing like GDownloadUrl and GXml for downloading and parsing an XML document in v3. You'll need to use a generic library like jQuery to help downloading your marker locations.
i'm parsing some html data which has google maps embedded (displaying just one certain point) and i was wondering:
how can i find out the exact geographic coordinates of that point?
thx
I will look into this further but if you are able to see the Google Maps representation, you can type this into your browser and it will pinpoint the exact center location:
javascript:void(prompt('',gApplication.getMap().getCenter()));
Very useful if you want to get quick lat/long values. Is this the kind of info you need?
Parsing HTML files and want to find what point map is displaying?
This is likely not be possible (correct me if I am wrong). The map is a JavaScript object that only exists inside a browser - it is only text code in the html file. Map variables and data only exist inside the JavaScript engine running inside the browser, their dynamic variable state cannot be stored in a file ahead of time.
If the site is displaying a static map image then we have a different story. Just parse the URL to google static maps requesting the map image.
i found out that the actual coordinates were stored in the html :)
Have you tried the LatLng Marker lab in google map?