Related
(I'm very noob with this. I'm learning on my own, I know my code is messy.)
I am working with Google Maps API, and I want the user to click a button (either Restaurant 1 or Restaurant 2) and then have the map pan to the location of that restaurant, using a marker and a InfoWindow above. Simple, right?
Here's my HTML code so far.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="fuente1.css">
<link rel="stylesheet" href="fuente2.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey">
<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;">
<!-- The Grid -->
<div class="w3-row-padding">
<!-- Left Column -->
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-container">
<img><br>Choose a restaurant<p><br>
<button id="button" style="width:110px;height:30px;cursor:pointer;">Restaurant 1</button>
<button id="button2" style="width:110px;height:30px;cursor:pointer;">Restaurant 2</button>
<!-- End Left Column --> </p>
</div>
</div>
</div>
<!-- Right Column -->
<div class="w3-twothird">
<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>
MAP
</h2><div class="w3-container">
<html>
<body>
<div id="map" style="width:555px;height:500px"></div>
<script>
function myMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(31.825948, -116.599869),
zoom: 16
});
}
function addmarker(lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map
});
map.panTo(new google.maps.LatLng(lat, lon));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQ3QnkneaUIsXaJHZtYwqdWxX9KCMj4CA&callback=myMap">"></script>
</body>
</html>
<br><br>
</div>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
</body>
</html>
</body>
</html>
As you can see I have everything set up. The only thing that doesn't work are the buttons.
I have the following Javascript but I have no idea whatsoever on how to implement it in my HTML.
$('#button').click(function() {
addmarker('-22.3157017', '-49.0660877');
});
$('#button2').click(function() {
addmarker('-23.5936152', '-46.5856465');
});
I'll be happy to hear any lectures for this affair and any help will be greatly appreciated.
For reference, I want it to work pretty much like this one. Place marker on google maps api with html button
I did not use your markup - I've created my own.
Upon checking your javascript, everything seems well, except of these two things: missing jQuery library and the code placement of your button event handlers.
It seems you are trying to add Google Maps Javascript API Markers to these locations "-22.3157017,-49.0660877" and "-23.5936152,-46.5856465" by pressing their corresponding triggers (buttons). I would suggest doing a Reverse Geocoding before adding the markers once an event has been fired.
The term geocoding generally refers to translating a human-readable
address into a location on a map. The process of doing the converse,
translating a location on the map into a human-readable address, is
known as reverse geocoding.
You should also add jQuery as an external library to make their events such as ".click()" to work. You can download it here.
For the buttons, you should add these lines $('#button1').click(function()); and $('#button1').click(function()); inside your myMap() function.
It should look something like this:
function myMap() {
var myLatLng = {lat: 31.825948, lng: -116.599869};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
$('#button1').click(function(){
var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
addMarker( coord, map );
});
$('#button2').click(function(){
var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
addMarker( coord, map );
});
}
On your addMarker function, add two arguments that accepts the coordinates, and the map object.
function addMarker(params, map) {);
Inside that function, create a variable geocoder and the value is a new instance of google.maps.Geocoder().
var geocoder = new google.maps.Geocoder();
With that, you can now use geocode method. Geocode method accepts two arguments: location and callback. In the location parameter, you need to supply the coordinates you acquired from the addMarker() function.
geocoder.geocode({'location' : params}, function( results, status ) {});
The callback is the part where most of our logic will be implemented. The callback accepts two arguments: results, and status. The results argument returns an array of results if the status is OK. If so, we will now iterate through each array element and then create a new Google Maps Javascript API Markers. On the markers, we'll just supply the coordinates and maps object for its position and map property.
if (status === 'OK') {
var result = results.map( function( value, index ){
map.setCenter(params);
var newMarker = new google.maps.Marker({
position : params,
map : map,
});
});
} else {
alert('Geo not successful: ' + status);
}
This line 'map.setCenter(params);' sets the position displayed by the map.
Whole code below:
<button id="button1">Restaurant 1</button>
<button id="button2">Restaurant 2</button>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=myMap">
</script>
function myMap() {
var myLatLng = {lat: 31.825948, lng: -116.599869};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
$('#button1').click(function(){
var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
addMarker( coord, map );
});
$('#button2').click(function(){
var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
addMarker( coord, map );
});
}
function addMarker(params, map) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'location' : params}, function( results, status ) {
if (status === 'OK') {
var result = results.map( function( value, index ){
map.setCenter(params);
var newMarker = new google.maps.Marker({
position : params,
map : map,
animation: google.maps.Animation.DROP,
});
});
} else {
alert('Geo not successful: ' + status);
}
});
}
Hope it could help and happy coding!
I have answered this before on stackoverflow for how to show icons and infowindow and just updated my fiddle to use https instead. Following are very simple steps you need to take care of.
When you click on that fiddle you will see all HTML, JS and CSS I have used to show icons on map, list of people on car and interactivity to click on them to centre on map.
Using gmap3 library I have inlcuded google map on page
Using List elements I have coded location of items at <li data-gb="car" data-mapid="sc102" data-isactive="0" data-lat="53.538566" data-long="-0.327017199999951">Second Car</li> in data attributes for each item. It can be restuarants, parks etc
Important bits in code are in Javascript and these are
Events and Addmarker actions as well as logic to click on list items.
{ action: 'addMarkers',
marker:{
values:ulmarkerspeople,
options:{
draggable: false,
icon:'http://webricate.com/stackoverflow/mapicons/male-2.png'
},
events:{
mouseover: function(marker, event, context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
jQuery(listelement).attr('data-isactive','1');
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}
},
mouseout: function(marker,event,context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#fff');
jQuery(listelement).attr('data-isactive','0');
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
jQuery("#customPopup").hide(500);
jQuery("#customPopup").html("");
}
}
}
}
}
Please read through Javascript comments on fiddle and you will get the gist of it.
I've just started trying to develop a website and I'd like to keep the html and javascript separate if I can. I'm trying to put a marker on a map, have the co-ordinates placed in a text box as part of a form, and have them sent to the database when the user submits the form. The code works when it's all inside the html doc, but when I try to separate it it doesnt work. Well, the map still shows up and I can set a marker on it, but it doesn't capture the co-ordinates.
In the head of the html
<script type="text/javascript" src="mapSubmitSighting.js"></script>
<body onload="initMap()">
Inside the div where I want the js to execute
<div id="map">
<div class="map" onclick="initMap();">
<script defer
src="https://maps.googleapis.com/maps/api/js?key==initMap"></script>
</div>
The js file
!function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 54.621277, lng: -6.692649 }
});
google.maps.event.trigger(map, "resize");
map.addListener('click', function(e) {
placeMarkerAndPanTo(e.latLng, map);
});
}
!function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);
document.getElementById("lat").value = latLng.lat();
document.getElementById("lng").value = latLng.lng();
}
I know there's lots wrong with this but if I could just work out how to get the javascript to work it'd be a start. Thank you!
Most part of your code actually works.
Did a few modification though.
Added initial marker position as I noticed that you intended to do this on your sample code.
Also, refactored your code so needed routines will be re-usable.
Please check below.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 50%;
}
</style>
<script src="mapSubmitSighting.js"></script>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD72DV80rL8PBw2BTTWOwHV3NPSQdx24D8&callback=initMap"></script>
<br/>
<div>
Latitude: <input type="text" id="lat"/><br/><br/>
Longitude: <input type="text" id="lng"/>
</div>
</body>
</html>
JS
function initMap() {
var initialLocation = {lat: 54.621277, lng: -6.692649 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: initialLocation
});
var marker = setMarker(initialLocation, map);
setTextCoordinates(initialLocation.lat, initialLocation.lng);
google.maps.event.trigger(map, "resize");
map.addListener('click', function(e) {
placeMarkerAndPanTo(e.latLng, map);
});
}
function placeMarkerAndPanTo(latLng, map) {
var marker = setMarker(latLng, map);
map.panTo(latLng);
setTextCoordinates(latLng.lat(), latLng.lng());
}
function setMarker(latLng, map){
var marker = new google.maps.Marker({
position: latLng,
map: map
});
return marker;
}
function setTextCoordinates(lat, lng){
document.getElementById("lat").value = lat;
document.getElementById("lng").value = lng;
}
Output
Hope this helps!
You are probably not linking the file correctly.
You can open the developer tools (F12 in Chrome, or just right-click on some part of the page and select Inspect Element) and look at the errors in the console.
Most likely there's a 404 error. Look at the URL of the file, does it match the place where it is supposed to be? Are you missing a folder? Did you forget to upload it? Let us know so we can further assist!
You also do not need the ! in the beginning of your js function. This is preventing your html from reading the js file.
should look like -->
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,`enter code here`
i have a problem with my places from google maps, i already have a functionality map with a file kml in my https server, but i don't want to download and upload the map every time I make changes, not work for me only embed I need manipulated with API, so this is my code:
var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.63736, -105.22883),
zoom: 2,
});
loadKmlLayer(src, map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
loadKmlLayer(circle, map);
map.setCenter(pos);
setTimeout(function(){
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
infowindow.setPosition(pos);
}, 2000);
});
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
This work fine, but have a way for direct the kml from my url of google maps places?
Using an existant Google 'My Places' map with Maps API v3 styling this thread have some idea, but not work, if you get a idea how make it will make it wonderful
Go to your "MyMap" map. Click on the three dots next to the name of the map, click on "Export to KML":
Choose the "Keep data up to date with network link KML (only usable online):
Rename the .kmz file to .zip, then open it and open the doc.kml file it contains. That file will have the direct link to the KML data specifying your "MyMap".
Use that link in a google.maps.KmlLayer
proof of concept fiddle
original MyMap
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
map: map
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I have a modal where when it is clicked the map show up, but the map is not working but instead a gray image is shown.
<button class="btn" data-toggle="modal" data-target="#myModal" onclick="resize()">Show Modal</button>
<!--MODAL-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body" id="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map" style="width: 580px; height:400px"></div>
</div>
<div class="modal-footer" id="modal-footer">
</div>
</div>
</div>
</div>
my srcipt is from google auto complete places, when the map is not inside the modal, it is working perfectly fine.
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function resize(){
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
}
</script>
I tried doing this Similar Question but it is giving me
Uncaught ReferenceError: $ is not defined
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
$(document).ready(function () {
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
});
<!DOCTYPE html>
<html>
<body>
<body>
<button class="btn" data-toggle="modal" data-target="#myModal"/>Show Modal</button>
<!--MODAL-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body" id="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map" style="width: 580px; height:400px"></div>
</div>
<div class="modal-footer" id="modal-footer">
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADR3ipXgTLZd7uIcl3NBUujxF3kKp9rFk&libraries=places&callback=initAutocomplete"
async defer></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
var map;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// ....
}
$(function() {
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
});
You have wrapped
google.maps.event.trigger(map, "resize");
inside function resize() {} that is never executed. Try wrapping it with jQuery's $(document).ready(function(){}); instead.
This kind fo error ($ is not defined) means that you have not initialized a javascript library in your code.
and as you are using:
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
you need to add jquery at the top of your script. Something like this:
You may find information here: w3schools jquery init
Start by solving the js error and possibly the map will load.
I am trying to add a Google Maps application to give the user the directions from his/her current location to a particular fixed static point on the map. So far I have created a controller and the related HTML. However, for some reason when I am testing this out I am not getting the map, but rather an error in the console ""
This is my controller:
'use strict';
angular.module('main')
.controller('LocationCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
google.maps.event.addDomListener(window, 'load');
var myLatlng = new google.maps.LatLng(43.07493, -89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$scope.map = map;
}
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
loadScript('http://www.google.com.mt/jsapi');
loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');
$scope.centerOnMe = function() {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting location',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-pane>
<ion-header-bar class="bar-dark">
<button ui-sref="main" class="button button-icon icon ion-navicon"></button>
<h1 class="title">Directions</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-pane>
Can someone tell me what I am doing wrong? Also, can some one give me some tips on how to give the user the directions to this static point when the user clicks on the Find Me link in the footer? (Something along these lines but the end point is fixed and the start point would be the location of the user when he clicks on the Find Me button - https://developers.google.com/maps/documentation/javascript/examples/directions-panel)
I am new to AngularJS and am not sure if my code is correct. Also, I am not using jQuery as a dependency.
Try integrating with Angular Google Maps
http://angular-ui.github.io/angular-google-maps/#!/
It's much easier to use and has good documentation.
The initialize function is not defined in the global context.
setting $window.initialize = initialize worked for me
also added some css, but i guess you already have them
working fiddle
hope this helps
Replace google.maps.event.addDomListener(window, 'load', initialize); with ionic.Platform.ready(initialize);. Similar quesiton.