Insert marker position for Google Map as a url - javascript

I want to embed a google map in my react app and I place some location markers there. I use
google-maps-react for this and Maps JavaScript API from google.
Marker in google map takes the position by using longitude and latitude as follows.
<Marker
name={'Dolores park'}
position={{lat: 37.759703, lng: -122.428093}} />
<Marker />
In my app I take the location from the user as a url, as follows
https://goo.gl/maps/4eDhXxvQCqmJnzmT7
My problem is, I want to give the "position" for as a URl. How do I do that? or atleast how do I get the longitude and latitude using the URL mentioned above, inside my code, so that I can paass them to .

You can make a get request to the provided link and parse the coming HTML accordingly. In this way, you can parse latitude and longitude. when requested to your sample link, there is a line with \"Nawalapitiya\" [[63356.8217311729,80.4860538,7.0326191]. You should find a way to parse it, then you can use it for every URL.

Related

Is it possible to change the content of place card in google map

I am displaying google map using iframe using longitude and latitude.
It displays the map with a place card which contains the longitude and latitude.
Is there a way to get the address instead of longitude and latitude in the place card?
<iframe id="mapframe" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=latitude,longitude&key=Google map API key" allowfullscreen></iframe>
Google Maps Embed API
You can if you use the Address as the query, I investigated and here are the result image below:
Embedded API using coordinates as query
Embedded API using Address as query
Hope this helps!
I think you can use: (1 infinite loop example)
?q=1+infinite+loop+cupertino+ca+95014
It's the best to provide everything you know, like street, zip and town. Then this should work fine

Embed customized map into website using Google Map api

I want to embed a custom (shared) google map i've created with specific markers into my website using the Google map api and javascript. The public link to the map: https://www.google.com/maps/d/edit?mid=zsBifQnz-5Kg.kzYonBq-f6oo&usp=sharing
I know that it is possible with iframe. But I need to add some links later on with js to the markers as well.
If its not possible, is there any way to get all the geo location data lat, and long from my custom map to dinamycally create my map?
You could do this with the google-maps javascript API and directly use the KMZ or KML that you create off your custom map. Just go to the options in your custom map and click "Download KML". If you plan to continue to make changes to your map, I would suggest the network KMZ file. The maps-api has a library to use this KMZ directly only a map.

Override KMZ/KML icons for a google.maps.kmlLayer

I am writing a mobile angular javascript app that receives a message. The message contains some metadata about the message and also a url which points to a kmz file. Currently I use that kmz url to display a kmllayer via google maps inside my app.
kmlLayers[i] = new google.maps.KmlLayer({
url: kmlURLs[i],
suppressInfoWindows: false,
map: $scope.map
});
The kml currently contains style information similar to this:
<Icon>
<href>root://icons/palette-4.png</href>
<x>32</x>
<y>128</y>
<w>32</w>
<h>32</h>
</Icon>
I would like to override the Icon for this layer based on metadata that I receive in my inbound message. So instead of seeing a pushpin, I show an icon such as a store icon or a post office icon. Is there a recommended way to do this? Thanks!

web page google map overlay from memory image

I am trying to set the Google Map overlay from an image created at the browser instead of giving a URL. Is it possible?
Below is the example giving on one of the google help documents. As you can see they set the second parameter to the URL. I would like to use an image from memory rather than the URL. I have seen where when doing Android development that is possible with the GroundOverlayOption.image but I don't see that as an option using the JS V3 API.
Any suggestions?
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
historicalOverlay = new google.maps.GroundOverlay(**'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'**, imageBounds);
historicalOverlay.setMap(map);

Google Earth: Disable flyToView on runtime

I'm currently making an application where I use google earth to display a path. This path will be updated on a regular basis, and I've used a network link to connect the google earth to a KML file.
The problem is that every time google earth recieves an update from the KML it resets the view. I would like to disable this feature, but still be able to "fly" to a specific location on startup.
I've tried using setFlyToView(false) on the network link, but this results in no flying at all. What I would like, is for google earth to fly to the location of the placemark at start, and then when it updates -from the KML file through the network link- it doesn't fly anywhere.
Is there a way to access and change options when google earth is already running? If it's possible I could then use the setFlyToView(true) at initialization and then setFlyToView(false) when google earth has already changed the view to where I want to be, thereby disabling the updating of the view, but not the initial view position.
Thanks in advance!
That is the behavior if you have flyToView set 1 in the NetworkLink. Check that the flyToView element is child of the NetworkLink not the Link. Possibly the KML being generated by the JavaScript API you're using is not setting the flyToView correctly or it isn't supported.
<Document>
<visibility>1</visibility>
<NetworkLink>
<name>NE US Radar</name>
<refreshVisibility>1</refreshVisibility>
<flyToView>1</flyToView>
<Link>...</Link>
</NetworkLink>
</Document>
Also, you may want to override default view with a LookAt or Camera element added to the NetworkLink to fly.

Categories

Resources