Develop Reference

Google Maps Auth. Key - where to put it?

I am a complete noob when it gets to building webpages but I am willing to learn.
I obtained a template website (Urbanic Template -
http://www.templatemo.com/tm-395-urbanic) and am trying to make (In Dreamweaver CS6) Google maps work.
I did all the usuall (registered,opened the account..) and obtained the key to put in my webpage but dont know where and how.
In my templatemo_script.js I can see the reference to the default cordinates of the map.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(16.8451789,96.1439764)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); }
So where and how am I exactly to put in the obtained Google Key so my site functions as it should ? Coordinates I will change ofcourse.

You need to insert it where you are loading the library. As user Phil pointed out, the documentation shows that it should be included in the script tag when loading the google maps library.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
If you aren't sure where this is, you may want to consider starting back at the basics of web development, just so you can get a solid understanding of the structure of a webpage.
But for starters, you might try looking in the index.html.

leaflet map is not fully loaded when its in iron-page

Backgroud:
I am using polymer framework to create a map service web app. And my map element is put inside iron-pages.
<iron-pages attr-for-selected="id" selected="{{data.page}}">
<main-page id="main"></main-page>
<test-page id="page"></test-page>
</iron-pages>
And the map element is inside the <main-page id="main"></main-page>
All the map settings are right , but the map is displaying like this:
enter image description here
Issue:
Just like the image above , the leaflet map is not fully loaded. However, when I resize the browser window, then the map loaded perfectly. It seems like the trigger to load the map became my resizing action?
My trials:
I tried to search others answer , https://github.com/Leaflet/Leaflet/issues/694
But when I execute map.invalidateSize() , the console says "invalidateSize() is not a function".
I tried to put <main-page id="main"></main-page> out of <iron-pages> which forsake routing feature temporarily for testing, and the map works perfectly.But What is the real issue in this circumstance?
I am very new to polymer, I am not sure where is the issue come from?
Could you please give me any suggestion?
Thank you!

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!

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.